Meshes
¿Qué es un Mesh?
Hasta este punto tenemos Geometrías (el esqueleto) y Materiales (la piel) como entes separados. Un Mesh (Malla) es el objeto final real y tangible. Es la fusión mágica entre una geometría y un material. Es el objeto que finalmente existe en la escena 3D.
El sistema TRS: Transform, Rotate, Scale
Una vez que tienes un Mesh, necesitas poder manipularlo en tu universo. Para ello, los Meshes heredan un conjunto de propiedades que te permiten manipularlos en los ejes X (izquierda/derecha), Y (arriba/abajo) y Z (adelante/atrás).
Position (Posición)
Donde está el objeto relativo al centro del mundo (0,0,0). Puedes moverlo de dos maneras:
mesh.position.x = 2; o mesh.position.set(2, 0, 0);
Rotation (Rotación)
Hacia dónde mira el objeto. CUIDADO: La rotación en Three.js NO usa grados (0 a 360). Usa Radianes. Medio giro (180 grados) es Math.PI. Un cuarto de giro (90 grados) es Math.PI / 2.
Scale (Escala)
El tamaño del objeto relativo a sí mismo. Por defecto es 1 en todos los ejes. Si pones mesh.scale.set(2, 2, 2) el objeto será el doble de grande. Usar escalas negativas (ej. -1) volteará el objeto como un espejo.
Grupos (La Organización del Mundo)
Imagina que tienes un coche hecho de varios meshes (llantas, chasis, vidrios). Si quieres mover el coche hacia adelante, ¿vas a mover los 10 meshes uno por uno? No. Creas un THREE.Group, metes todos los meshes allí, y solo mueves el grupo. Las piezas se moverán juntas relativas al grupo.
Consejo profesional
Math.PI es tu mejor amigo en rotaciones. Piensa en Math.PI como 180° y Math.PI * 2 como 360°. Te ahorrará muchos dolores de cabeza intentar convertir grados a radianes manualmente.
Posicionando Meshes y Grupos
// 1. Unir esqueleto y piel
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
// 2. Manipular TRS
cube.position.set(0, 1, 0); // 1 unidad hacia arriba
cube.rotation.y = Math.PI / 4; // Rotar 45 grados en Y
cube.scale.set(2, 0.5, 1); // Estirar y aplastar
// 3. Agrupar objetos
const carGroup = new THREE.Group();
carGroup.add(chasisMesh);
carGroup.add(llantaMesh);
// Al rotar el grupo, las llantas y el chasis rotan juntos
carGroup.rotation.y = Math.PI;
scene.add(carGroup);Varios meshes contenidos en un mismo grupo giratorio.
Errores comunes
Practica lo aprendido
Alinea tus objetos.