Crear un cubo con Three Js
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 threeEste 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.
