Tu primera escena
¿Qué es una Escena?
En el mundo del 3D, no hay nada hasta que tú lo declaras. El espacio es un vacío infinito. Una Scene (Escena) en Three.js es el contenedor principal, el universo mismo donde vivirán todos tus objetos, luces y cámaras.
Imagina un cuarto completamente oscuro. Hasta que no enciendas una luz o coloques un objeto dentro, el cuarto existe, pero no hay nada que ver. La escena es ese cuarto.
La Santísima Trinidad de Three.js
Para ver algo en la pantalla, SIEMPRE necesitas tres componentes fundamentales interactuando entre sí:
- Scene: El contenedor del mundo.
- Camera: Tus ojos, el punto de vista desde donde se graba el mundo.
- Renderer: La máquina de revelado que toma la escena y la cámara, y pinta los píxeles en el elemento
<canvas>de HTML.
¿Cómo funciona?
El flujo de trabajo es sistemático. Primero, instancias la escena. Luego, instancias la cámara y la alejas un poco (porque por defecto nace en la coordenada [0,0,0], justo en el centro, y si pones un objeto ahí, la cámara estaría dentro de él). Finalmente, conectas el renderer a un elemento HTML de tu página y le ordenas: "¡Renderiza esto!".
El Bucle de Animación
Si solo renderizas una vez, obtienes una fotografía. Si quieres movimiento, necesitas un bucle de animación usando requestAnimationFrame. Es como decirle al navegador: "Toma una foto, muévela un poco, toma otra foto, rápido, ¡60 veces por segundo!".
Consejo profesional
Siempre separa la lógica de Three.js de tu estructura HTML. Mantén un contenedor limpio, como un div con id='canvas-container', y deja que tu script de Three.js inyecte el elemento canvas dinámicamente. Esto evita conflictos y mantiene tu HTML semántico.
La anatomía de una escena básica
import * as THREE from 'three';
// 1. Escena
const scene = new THREE.Scene();
// 2. Cámara (FOV, Aspect Ratio, Near, Far)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5; // Alejamos la cámara
// 3. Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Objeto (Cubo)
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x56C288 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 4. Render Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Tu primer 'Hola Mundo' en 3D.
Errores comunes
Practica lo aprendido
Construye paso a paso tu primera escena real.