Lesson 5 · Lección 5 · Escena, Luces y Cámara
The scene is the 3D world that holds everything. The lights determine how it looks. The camera is your viewpoint. Together they set the entire mood of the visualization.
La escena es el mundo 3D. Las luces determinan cómo se ve. La cámara es tu punto de vista.
Open docs/js/scene.js. The scene is created with just two lines —
but those lines control everything:
// Create the empty 3D world scene = new THREE.Scene(); // Set the background color (deep night brown) scene.background = new THREE.Color(0x1a0a00); // Add fog: starts fading at 35 units, full fog at 65 units scene.fog = new THREE.Fog(0x1a0a00, 35, 65);
Why fog? It hides the hard edge where the scene ends. Objects far away gently fade into the background color instead of disappearing abruptly. It adds depth and mystery!
Click a color to preview how it changes the mood:
// In scene.js: scene.background = new THREE.Color(0x1a0a00); scene.fog = new THREE.Fog(0x1a0a00, 35, 65);
The scene has two lights working together. Open scene.js
and find the light setup:
// 1. Ambient light: soft fill that reaches everywhere // Color: warm orange-white (like candlelight) // Intensity: 0.75 (pretty bright) const ambient = new THREE.AmbientLight(0xffcc88, 0.75); scene.add(ambient); // 2. Directional light: like the sun, casts shadows // Position: above and to the right const dirLight = new THREE.DirectionalLight(0xfff0cc, 1.6); dirLight.position.set(6, 12, 8); scene.add(dirLight);
Click a mood below to see how light color changes everything:
The camera defines your viewpoint into the 3D world. Think of it as the position of your eyes:
// PerspectiveCamera: objects farther away look smaller (natural!) camera = new THREE.PerspectiveCamera( 45, // Field of view in degrees window.innerWidth / window.innerHeight, // Aspect ratio 0.1, // Near clip: don't draw closer than this 100 // Far clip: don't draw farther than this ); // Position: center (X=0), up 10 units (Y=10), 17 units toward you (Z=17) camera.position.set(0, 10, 17);
Field of view (FOV): smaller = more zoomed in (telephoto).
Larger = wider angle. Try changing 45 to 70
for a dramatic wide-angle effect!
Open docs/js/scene.js. Change the background color from
0x1a0a00 to 0x000033 (midnight blue).
Also change the fog color to match. Save, refresh — the whole mood shifts!
Cambia el color de fondo de 0x1a0a00 a 0x000033.
¡El ambiente cambia completamente!