Three.js sin el dolor: una guía para diseñadores
Cómo abordar tu primera escena 3D en navegador sin perderte en matrices ni en glsl. Empezamos por el render loop y acabamos en un mango giratorio.
Three.js intimida porque mezcla matemática (matrices, cuaterniones) con grafos de escena, shaders y un render loop que tienes que mantener tú. Pero un 90% del trabajo creativo se hace con APIs de alto nivel: cargar un GLTF, posicionar una cámara, añadir luces, animar con GSAP.
El primer paso es estructurar mentalmente la escena: Scene > Camera > Mesh(es). La camera mira a un target; la mesh tiene una geometry y un material. El render loop simplemente repite renderer.render(scene, camera) 60 veces por segundo.
Para sentir progreso rápido, salta directo a GLTFLoader. Bájate un modelo de Sketchfab/Poly Haven, cárgalo, ponlo en el origen y rotalo en el tick. En 20 líneas tienes un objeto 3D girando con iluminación PBR.
Cuando la curiosidad pica, abre los shaders. No empieces por shaders complejos: edita el fragment shader de un MeshBasicMaterial y juega con gl_FragColor. Cinco minutos jugando con sin(time) ya te sentirá un universo nuevo.
Trabaja con JMWEB
Construyamos algo con personalidad.
Todo arranca con una conversación. Trae un brief, una referencia, una idea a medio cocinar — del resto me ocupo yo.
Empezar un proyecto
