Materiales
¿Qué son los Materiales?
Si la geometría es el esqueleto de tu objeto 3D, el Material es su piel. Define de qué está hecho el objeto: ¿es madera mate, metal pulido brillante o cristal transparente? El material determina cómo los vértices y caras reaccionarán a la luz y al entorno.
Los 3 Materiales Fundamentales
Three.js tiene decenas de materiales, pero en producción, usarás principalmente estos tres:
1. MeshBasicMaterial (El rebelde)
Este material no reacciona a la luz en absoluto. Si lo pintas de rojo, será un círculo o cuadrado rojo plano en tu pantalla, sin volumen ni sombras. Es excelente para UI 3D o estilos "flat design" o "cel-shading" (como Zelda Breath of the Wild). Es el más rápido y ligero.
2. MeshStandardMaterial (El profesional PBR)
PBR significa "Physically Based Rendering" (Renderizado basado en físicas). Este material intenta imitar el mundo real basándose en dos propiedades mágicas: Metalness (qué tan metálico es) y Roughness (qué tan rugosa/borrosa es la superficie). Es el estándar de la industria hoy en día.
3. MeshPhongMaterial (El clásico brillante)
Antes del PBR existía Phong. Es ideal para plásticos brillantes o cerámica. Reacciona a la luz produciendo un "specular highlight" (el típico punto blanco de brillo en las manzanas o bolas de billar). Es más barato computacionalmente que el Standard.
Color en Three.js
Olvídate del HEX string tradicional. En Three.js usamos números hexadecimales directos: 0xff0000 en lugar de "#ff0000", o instanciamos una clase de color: new THREE.Color('hotpink').
Consejo profesional
No todo tiene que ser ultra realista. El MeshMatcapMaterial es un material asombroso que no necesita luces en la escena para tener sombras y brillos complejos. Utiliza una imagen circular de referencia (Matcap) y es increíblemente ligero para la web.
Materiales en acción
// 1. Básico (Sin luz)
const basicMat = new THREE.MeshBasicMaterial({
color: 0x9FA6FF,
wireframe: true
});
// 2. Standard PBR (Requiere luces en la escena)
const standardMat = new THREE.MeshStandardMaterial({
color: 0x56C288,
metalness: 0.8, // 0 = plástico, 1 = metal
roughness: 0.2 // 0 = espejo pulido, 1 = mate
});
// 3. Phong (Plástico brillante)
const phongMat = new THREE.MeshPhongMaterial({
color: 0xFC5D7D,
shininess: 100 // Qué tan concentrado es el brillo
});De izquierda a derecha: Basic (plano), Phong (plástico) y Standard (metal).
Errores comunes
Practica lo aprendido
Experimenta con las físicas PBR.