En esta entrada, vamos a dar los primeros pasos con Three.js, creando una sencilla escena, en la cual varios tipos de figuras.
El cubo que es el elemento predilecto que aparece en software como Blender como primera figura geométrica; para esto, necesitamos cumplir 3 pasos.
Elementos fundamentales en Three.js
Para poder renderizar un objeto en Three.js necesitamos 3 elementos:
- El primer elemento viene siendo la cámara, la cámara es el ojo o el medio por el cual podemos visualizar nuestra figuras geométricas, que pueden tener varias configuraciones según necesidades, pero, usualmente se una una cámara de tipo perspectiva la cual permite visualizar como si fuera el ojo humano, es decir, podemos ver profundidad.
- Otro elemento que no puede faltar es la escena, la escena es el espacio en donde colocamos nuestras figuras, en este ejemplo, un cubo; por lo tanto, lo puedes ver como si fuera el universo, el cual no es más que un espacio vacío en el cual existen estrellas, planetas...
- Finalmente tenemos nuestras figuras geométricas que es lo que queremos visualizar; a las mismas podemos animarlas, aplicar operaciones geométricas como traslación, rotación, escalado, aplicar colores, materiales, entre otros.
Hay un cuarto elemento que viene siendo el render, que no es más que el motor de renderizado que soporta todo lo demás.
Creando nuestra primera figura geométrica un cubo
Código de la clase, con esto tenemos el ejemplo mínimo de crear una escena de Three.js que consta de una escena, cámara, proceso de render y una figura:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
const cube = new THREE.Mesh( geometry, material );
cube.position.y = 1
scene.add( cube );
camera.position.z = 2;
renderer.render(scene, camera);
</script>
</body>
</html>Explicación del código anterior
Creamos el proceso de render con:
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );En la cual especificamos el tamaño de la pantalla.
Y lo agregamos al DOM:
document.body.appendChild( renderer.domElement );También creamos la cámara y la escena:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 1000 );Creamos una figura 3D; para eso tenemos que crear la geometría:
const geometry = new THREE.BoxGeometry();Y el material, que pueden ser varios tipos, pero, el más sencillo es este, que podemos indicar un color:
const material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );Lo posicionamos en donde queramos con:
cube.position.y = 1 Agregamos la escena:
scene.add( cube );Reposicionamos la cámara:
camera.position.z = 2;Y finalmente, disparamos el render:
renderer.render(scene, camera);Con esto, tenemos una escena sencilla como la mostrada en la portada de esta publicación.
Crear mallado o wireframe
Podemos activar el wireframe o el mallado fácilmente en nuestras figuras geométricas usando la opción de wireframe en los distintos mesh que creemos en Three.js.
Partiendo de un mesh básico para un cubo, como el que vimos anteriormente para crear nuestra primera escena en Three.js:
const geometry = new THREE.BoxGeometry(4,4,4)
const material = new THREE.MeshBasicMaterial({ color: 0x00FF00})Agregamos la opción de wireframe; esto lo puedes hacer para la mayoría de los mesh soportados por Three.js:
const geometry = new THREE.BoxGeometry(4,4,4)
const material = new THREE.MeshBasicMaterial({ color: 0x00FF00, wireframe: true })Y eso es todo; por lo demás, lo agregamos a la escena y tendremos una figura como el de la portada:
const cube = new THREE.Mesh( geometry, material )
scene.add( cube )Crear una esfera
En Three.js tenemos distintas figuras que podemos crear, desde rectángulos o cajas como vimos en la primera escena con Three.js, como esferas; para dibujar una esfera, tenemos la función de SphereGeometry que recibe de manera obligatoria, el radio, y cantidad de segmentos para el ancho alto:
THREE.SphereGeometry(20, 20, 20);Por lo demás, sigue la misma estructura que cualquier otra figura geométrica que se quiera establecer; es decir, pasarle el mesh y agregarlo a la escena:
var sphereGeometry = new THREE.SphereGeometry(20, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({
color: 0x7777FF,
wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(20, 4, 2);
scene.add(sphere);Aplicar rotaciones mediante figuras geométricas
En Three.js los ejes en su entorno 3D para girar en los 360 grados, tenemos que usar radianes y con esto tenemos que usar a PI; en donde un PI completo equivale a los 360 grados; en este caso, queremos 180 grados, es decir, medio PI:
cube.rotation.x = Math.PI * .5En el ejemplo anterior, lo estamos aplicando sobre un cubo, que fue la primera figura geométrica en Three.js que creamos anteriormente.
Crear un plano
Al igual que la esfera en Three.js que generamos anteriormente, lo importante es notar que solamente cambia el nombre de la figura geométrica; en este caso, la del plano que viene siendo la de PlaneGeometry que recibe como parámetro el ancho y largo del plano
const geometryPlane= new THREE.PlaneGeometry(14, 5)Por lo demás, hay que definir el material y a agregarlo a la escena:
// plano
const geometryPlane= new THREE.PlaneGeometry(14, 5)
const materialPlane= new THREE.MeshBasicMaterial({ color: 0xFF0000, wireframe: false })
const plane= new THREE.Mesh( geometryPlane, materialPlane)
scene.add(plane)Ya con el plano agregado, puedes variar sus transformaciones geométricas, por ejemplo:
//*** POSICIONES
cube.position.x = -5
cube.rotation.x = Math.PI * .5
plane.rotation.x = Math.PI * -0.5
plane.position.set(0,-2,1)Generar un eje cartesiano
Vamos a generar una figura de ayuda, como viene siendo el axis 3D; con esto, sabremos fácilmente dónde está cada uno de los ejes 3D; como tal, no es una figura con la cual podemos hacer escenas:
const axesHelper = new THREE.AxesHelper( 10 );
scene.add( axesHelper );
Acepto recibir anuncios de interes sobre este Blog.
Aprende los fundamentos de Three.js y crea tu primera escena 3D desde cero. Esta guía para principiantes te enseñará paso a paso a configurar la cámara, el renderizador y a generar figuras geométricas como cubos, esferas y planos, aplicando rotaciones y materiales.