Mentalidad 3D para frontend: de la capa 2D a la escena en R3F
Aprende a pensar en escena, cámara, malla, geometría y material para dejar de tratar Three.js como un CSS con eje Z. Esta lección te da el vocabulario base y te lleva a una primera escena mínima en React Three Fiber.
El error más común al entrar en Three.js es pensar que una escena 3D es un layout 2D al que se le ha añadido profundidad. No funciona así. En 2D colocas cajas en un flujo visual; en 3D diriges una cámara dentro de un espacio con volumen, distancia, luz y materiales.
Por eso el vocabulario importa tanto. Si no distingues entre `mesh`, `geometry`, `material`, `camera` o `scene`, terminarás tocando cosas al azar. React Three Fiber no elimina esos conceptos: te obliga a expresarlos de forma declarativa y ordenada.
R3F es el puente correcto en 2026 porque te permite trabajar con mentalidad React sin esconderte de Three.js. Puedes componer escena con componentes, usar refs para animar y mantener una arquitectura legible cuando el proyecto crece.
En esta primera lección no buscamos hacer una web espectacular. Buscamos algo más importante: construir un modelo mental correcto para que todo lo que venga después tenga sentido técnico y visual.
- En 2D colocas elementos. En 3D diriges percepción.
- Un hero 2D se resuelve con composición, jerarquía tipográfica y spacing. Un hero 3D añade una variable nueva: el punto de vista. La misma malla puede parecer elegante, torpe o diminuta según la cámara, la luz y el material.
- Eso obliga a pensar en distancia, escala relativa, ángulo de lectura y atmósfera. No basta con cargar un modelo. Hay que decidir cómo se ve, desde dónde se mira y qué historia visual cuenta.
- Si estas piezas no te quedan claras, cada demo futura te parecerá magia negra.
- La `scene` es el contenedor general. La `camera` define desde dónde miras. La `geometry` aporta la forma matemática y el `material` define la apariencia. Cuando unes geometría y material obtienes un `mesh`, que es lo que realmente añades a la escena.
Qué cambia al pasar de 2D a 3D web
En 2D colocas elementos. En 3D diriges percepción.
Un hero 2D se resuelve con composición, jerarquía tipográfica y spacing. Un hero 3D añade una variable nueva: el punto de vista. La misma malla puede parecer elegante, torpe o diminuta según la cámara, la luz y el material.
Eso obliga a pensar en distancia, escala relativa, ángulo de lectura y atmósfera. No basta con cargar un modelo. Hay que decidir cómo se ve, desde dónde se mira y qué historia visual cuenta.
Vocabulario esencial: escena, mesh, geometría y material
Si estas piezas no te quedan claras, cada demo futura te parecerá magia negra.
La `scene` es el contenedor general. La `camera` define desde dónde miras. La `geometry` aporta la forma matemática y el `material` define la apariencia. Cuando unes geometría y material obtienes un `mesh`, que es lo que realmente añades a la escena.
Esta separación no es teórica: te permite cambiar forma sin tocar apariencia, o apariencia sin reconstruir la geometría. Esa modularidad es exactamente lo que vuelve potente a Three.js dentro de proyectos reales.
- `scene`: el contenedor del mundo 3D.
- `camera`: el punto de vista y la perspectiva.
- `geometry`: la forma base del objeto.
- `material`: cómo se ve y cómo reacciona a la luz.
- `mesh`: la unión entre forma y apariencia.
Por qué React Three Fiber es el puente correcto
R3F no sustituye a Three.js: lo hace más componible en un proyecto React.
En Three.js puro controlas manualmente escena, render loop y ciclo de vida. Eso da mucho poder, pero también dispersa responsabilidades rápidamente. R3F traduce los objetos 3D a componentes React y te deja pensar en composición, árbol de escena y responsabilidades por pieza.
Aun así, R3F no te ahorra entender Three.js. Si no sabes qué hace una cámara o por qué un material necesita luz, tampoco lo sabrás en React. La ventaja está en el puente, no en ocultar el motor.
La cámara no es un detalle: es dirección visual
El FOV y la posición no son números arbitrarios; son narrativa.
Una `PerspectiveCamera` con FOV muy amplio exagera profundidad y dramatiza el objeto, pero puede deformar. Un FOV más contenido resulta más elegante para producto. La posición también cambia el carácter: frontal para claridad, lateral para dinamismo, cenital para lectura técnica.
Muchos principiantes añaden más luces o cambian el modelo cuando lo que falla es una cámara mal decidida. En producción conviene ajustar cámara antes de animar nada.
Primera escena mínima con R3F
La meta no es lucirse; es ensamblar correctamente las piezas.
Una escena mínima útil ya te obliga a resolver cinco decisiones: dónde vive el `Canvas`, qué cámara usas, qué luz mínima necesita el material, qué malla renderizas y qué animación continua o puntual necesita.
En el ejemplo resuelto verás un cubo girando suavemente con `useFrame`. No es un efecto finalista. Es una forma controlada de entrenar escena, cámara y render loop sin contaminación conceptual.
- Empieza con una sola malla y un solo material.
- Usa `meshStandardMaterial` si quieres entrenar lectura de luz real.
- No metas controles, HDR y postprocesado en la misma primera demo.
- Si algo se ve mal, revisa antes cámara y luces que geometría.
