Segunda parte

Mesh 🔮

Bien, continuaremos donde nos quedamos, en nuestra pantalla negra y añadiremos un Mesh (una malla), Los mesh u objetos 3D se componen de una geometría y un material

Geometría 🌐

En pocas palabras es la forma que tomara nuestro objeto, esto lo hace colocando de manera precisa puntos en nuestro espacio 3D (vértices) y rellenando el espacio con una "cara" o face. Para crear nuestro cubo, lo hacemos de la siguiente forma.

const geometry = new THREE.BoxGeometry();
Las dimensiones por defectos serán de 1,1,1 (uno de ancho, uno de alto y uno de profundidad)

Materiales 🧱

Puedes pensar en ellos tal cual el mundo real, como una "piel". Algunos pueden ser translúcidos, metálicos, simples colores, sombras, etc. El material lo creamos así

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

Una vez nuestra geometría y material creados, creemos nuestro mesh y añadámoslo a nuestra escena.

...
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
console.log("cube", cube);
scene.add(cube);
...

Podemos ver en nuestra consola que hemos creado exitosamente nuestro cubo, pero, ¿por qué no se ve?

Vectores 📐

Simple lo que sucede es que nuestra cámara, y nuestro mesh están en la posición inicial, el punto 0,0,0. En threeJs la posición inicial es el centro de nuestra escena.

Podemos mover nuestra cámara para atrás, o nuestro cubo da igual. Movamos la cámara. Justo después de iniciar nuestra cámara añadamos esta línea.

camera.position.z = 5;

Pero... ¿Qué significa ese 5? ¿Metros? ¿Centímetros? ¿y porque vemos un cuadrado en lugar de un cubo?

Al igual que como sucede con los SVG, threeJs manea Unidades y depende de nosotros tratarlas como tal, por lo que estamos diciendo es que mueva la cámara 5 "unidades" de manera positiva en el eje Z.

Todos los objetos heredados de la clase isObject3D contienen propiedades como position, rotation, scale. Estas propiedades esperan un Vector3, que puedes pensar en ellos como en un array con 3 valores. El orden inicial de los ejes X, Y, Z. y funcionan muy usando el plano cartesiano

Podríamos mover nuestro Mesh de la siguiente forma. (solo ejemplo)

cube.position.x = -1 // podemos usar el eje x en negativo
cube.position.y = 3+3 // podemos realizar operaciones matematicas

ThreeJs también nos provee del metodo set() que espera un vector3

cube.position.set(-1, 3+3, 0)
// o tambien
const myCubePosition = new THREE.Vector3(-1, 3+3, 0)
cube.position.set(...myCubePosition)

También existen Vector2 y Vector4 (si no es broma hay 4 dimensiones, pero no te preocupes, no las veremos en este post y no es tan difícil de entender)

Con respecto a la última pregunta, en realidad es un cubo, solo que lo estamos visualizando perfectamente alineado, si deseas puedes probar subiendo la cámara una unidad en el eje Y

Request animation frame 💥

El último detalle que vamos a ver, es la animación.

Y para esto hacemos uso de otra API que los navegadores nos proveen, el Request animation API. En palabras muy cortas, es una API que se creó específicamente para crear animaciones, se ejecuta cada frame por segundo (FPS) y viene con un montón de beneficios para el rendimiento.

Básicamente, vamos a renderizar nuestra escena cada FPS y aplicar un leve cambio (girar el cubo) y esto lo hacemos mediante una función recursiva.

function loop() {
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  requestAnimationFrame(animated);
  renderer.render(scene, camera);
}
loop();

Dato curioso: no hay un estándar para el nombre de esta función, algunos la llaman RAF, otros animated, otros loop e incluso tick

Y así hemos terminado de diseccionar por completo todos los componentes que contienen las escenas 3D con threeJS (y casi cualquier otro motor de gráficos 3D 😮 )

Puedes ver el ejemplo aquí

¿Dónde continuar ahora?

Sé lo que estás pensando... tan largo el post, ¿solo para crear un cubo verde girando? Pasos pequeños llegan a grandes resultados, afortunadamente hay muchos recursos online sobre este tema, hay mucha gente creado cursos y videos.

Todas las increíbles páginas que viste al principio fueron creadas usando como base estos métodos. ThreeJS es tan grande que contiene muchas funciones que aún no están documentadas 🤯. Y constantemente se crean más.

Este es un área del código altamente creativa y reconfortante, y por experiencia propia puedo decir que la comunidad es muy amigable y dispuesta a ayudar.

Así que si alguna vez te llamo la atención, crear juegos u objetos 3D o si eres una persona creativa que está buscando un nuevo desafío, esto puede ser para ti.

Algunos links de interés:

• https://threejs.org/
• https://threejs-journey.com/
• https://www.youtube.com/@AlvaroDevLabs
• https://lessons.wawasensei.dev/courses/react-three-fiber/lessons/intro

También dejaré mi twitter (X) por acá, por si tienes alguna consulta estaré más que feliz de ayudar

Hasta luego y happy 3D Coding 🤓