Modelos 3D
Traer arte al código
Construir mundos usando solo cubos y esferas programadas está bien para matemáticas, pero para experiencias impactantes necesitas Modelos 3D reales creados por artistas en programas como Blender, Maya o Cinema4D.
El formato GLTF / GLB
Históricamente existían formatos pesados como OBJ o FBX. Hoy en día, la industria web ha estandarizado el uso de GLTF (y su versión binaria empaquetada, .glb). Es conocido como el "JPEG del 3D". Es ligero, comprime texturas y geometrías, y soporta animaciones integradas.
GLTFLoader
Para traer estos modelos a tu escena, usamos un Addon llamado GLTFLoader. Este loader descargará el archivo, desempaquetará su geometría y materiales PBR automáticamente, y te devolverá una estructura lista para añadir a tu Scene.
Optimización en Producción
Un modelo descargado de internet puede tener millones de vértices y texturas 4K. Si lo cargas en la web, tardará 15 segundos en descargar y luego trabará el móvil de tu usuario. Siempre debes pasar tus modelos por Blender o herramientas como Draco para comprimirlos antes de llevarlos a Three.js.
Consejo profesional
¿Tu modelo es muy oscuro cuando lo importas? Blender usa sistemas de iluminación complejos, pero Three.js importa el modelo crudo. Tendrás que configurar tus propias luces en Three.js o, mejor aún, usar un Environment Map (HDRI) para que los materiales metálicos tengan algo que reflejar.
Cargando un archivo .GLB
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// Instanciamos el loader
const loader = new GLTFLoader();
// load( url, onLoad, onProgress, onError )
loader.load(
'/models-three.js/small-airplane.glb',
function (gltf) {
// El modelo cargó correctamente
const model = gltf.scene;
// Ajustar escala si es muy grande o pequeño
model.scale.set(0.5, 0.5, 0.5);
// Centrarlo y añadirlo a la escena
model.position.set(0, 0, 0);
scene.add(model);
},
function (xhr) {
// Para mostrar barras de progreso
console.log((xhr.loaded / xhr.total * 100) + '% cargado');
},
function (error) {
console.error('Un error ocurrió', error);
}
);Modelo GLB de un pequeño avión cargado y renderizado.
Errores comunes
Practica lo aprendido
Integra arte profesional.