Texturas
Pintura para tus modelos
Los colores sólidos están bien, pero la vida real tiene imperfecciones, granos, patrones y fotografías. Las Texturas te permiten envolver una imagen 2D (como un .jpg o .png) alrededor de tu geometría 3D, igual que cuando envuelves un regalo.
El TextureLoader
Cargar imágenes lleva tiempo, no ocurre de forma instantánea. Por eso, usamos el TextureLoader de Three.js. Su función es pedirle la imagen al servidor y devolvértela en un formato que la tarjeta gráfica (WebGL) pueda entender.
Mapeo UV
¿Cómo sabe Three.js qué parte de la imagen va en qué parte de la esfera o el cubo? A esto se le llama UV Mapping. Imagina pelar una naranja y aplanar la cáscara sobre la mesa. Los vértices de la geometría (XYZ) están mapeados a coordenadas 2D en la imagen (UV). Las primitivas de Three.js ya vienen con coordenadas UV perfectas por defecto.
Tipos de Texturas en PBR
Para lograr fotorrealismo real, no se usa una sola imagen. Se usa un set de texturas para alimentar el MeshStandardMaterial:
- map (Albedo): La foto del color puro de la superficie (como madera).
- normalMap: Una imagen extraña morada/azul que finge profundidad, haciendo que la superficie se vea rugosa con luces y sombras falsas increíblemente detalladas sin añadir más polígonos.
- roughnessMap: Una imagen en blanco y negro donde lo negro es muy brillante (mojado) y lo blanco es mate (seco).
Consejo profesional
¡Cuidado con el tamaño de las texturas! Una textura 4K (4096x4096px) pesa muchísimo en la RAM de video. Para web, trata de usar texturas en resoluciones potencias de 2 (512x512, 1024x1024) y altamente comprimidas en JPG o formato WebP.
Envolviendo geometrías con imágenes
// 1. Instanciar el Loader
const textureLoader = new THREE.TextureLoader();
// 2. Cargar texturas (Esto es asíncrono, pero Three.js te permite pasarlo directamente)
const colorTexture = textureLoader.load('/imagenes/ladrillo-color.jpg');
const normalTexture = textureLoader.load('/imagenes/ladrillo-normal.jpg');
// 3. Aplicarlo al material
const material = new THREE.MeshStandardMaterial({
map: colorTexture,
normalMap: normalTexture,
roughness: 0.7
});
// 4. Opcional: Repetir la textura como mosaico
colorTexture.repeat.set(2, 2);
colorTexture.wrapS = THREE.RepeatWrapping;
colorTexture.wrapT = THREE.RepeatWrapping;Una esfera generando la ilusión óptica del planeta Tierra usando una textura plana.
Errores comunes
Practica lo aprendido
Dale vida real a tus objetos.