Crear un cubo con Three Js

 in Javascript by

Three Js es una libreria javascript para crear y mostrar graficos en 3d en el navegador, la libreria es open source y cuenta con mucha documentacion en este articulo vamos a aprender a hacer un cubo.

Lo primero que debemos hacer es instalar la libreria Three.js, para instalarlo vamos a usar el siguiente comando.

npm install --save three

Este comando nos va a descargar los archivos de la libreria Three.js y se van a guardar en la carpeta “node_modules” y despues en la carpeta “three”.

Despues vamos a usar el archivo “three.js” que esta en la carpeta build.

Lo siguiente que vamos a hacer sera crear un archivo html y en la seccion header vamos a agregar la referencia al archivo three.js.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<script type="text/javascript" src="node_modules/three/build/three.js"></script>
</head>
<body>
<h1>Creando con Three Js</h1>


<script type="text/javascript">
/* CODIGO THREE JS AQUI */
</script>

</body>
</html>

En el codigo HTML agregamos la base de todo archivo HTML despues en el HEAD agregamos la etiqueta SCRIPT y en el parametro “src” le pasamos la ruta donde tenemos el archivo three.js la cual es “node_modules/three/build/three.js”

Despues en el Body del documento HTML vamos a crear un Heading h1 para mostrar y despues una etiqueta SCRIPT donde vamos a escribir el codigo javascript para crear un cubo.

En esta parte el codigo sera usando funciones de Three.js.

El siguiente codigo va en la seccion /* CODIGO THREE JS AQUI*/

const scene = new THREE.Scene(); // Creamos la Escena es lo primero a crear 
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // Despues creamos la camara, esta la podemos mover

const renderer = new THREE.WebGLRenderer(); // Creamos el renderer para renderizar o mostrar las imagenes
renderer.setSize( window.innerWidth, window.innerHeight ); // Le asignamos medidas al rendered en este caso sera lo largo y ancho de la ventana
document.body.appendChild( renderer.domElement ); // Agregamos el redered al BODY del HTML

const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); // Creamos un Cubo geometrico
const material = new THREE.MeshBasicMaterial( { color: 0x3498db } ); // Creamos un material

const cube = new THREE.Mesh( geometry, material ); // Creamos el Mesh en el cual se Juntan la geometria y el material.
scene.add( cube ); // agregamos el cubo/mesh a la escena

camera.position.z = 10; // Movemos la posicion Z de la camara


// La funcion animate sirve para ejecutarse en cada frame de la animacion
function animate() {
	requestAnimationFrame( animate ); // Asignamos la funcion animate a la funcion requestAnimationFrame para que se este ejecutando continuamente

	cube.rotation.x += 0.01; // En cada frame de animacion sumamos la rotacion X
	cube.rotation.y += 0.01; // En cada frame de animacion sumamos la rotacion Y

	renderer.render( scene, camera ); // Renderizamos de nuevo en cada frame
}

animate(); // Ejecutamos la funcion animate por primera vez

Y listo ahora a ejecutar el archivo en el navegador y veremos lo siguiente.

Leave a comment