Welcome back! In the previous section, we touched upon the fundamental building blocks of any Three.js experience: the Scene, the Camera, and the Renderer. Now, let's dive deeper into the first of these – the Scene. Think of the Scene as your virtual stage. It's the container where all your 3D objects will reside, interact, and exist within your digital world.
The Scene object in Three.js is incredibly simple to understand. Its primary role is to hold everything that will be rendered. This includes not just the 3D models you create or import, but also lights, cameras, and even helper objects that you might use for debugging.
const scene = new THREE.Scene();This single line of code creates an empty scene. You can imagine it as an empty room, ready to be filled with furniture (your objects), lights, and a window (your camera).
Adding objects to the scene is just as straightforward. Once you have created a 3D object (which we'll learn how to do in the next chapter!), you simply use the add() method of the scene.
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);In this snippet, we've created a simple green cube and then added it to our scene. Now, this cube exists within the virtual space of our scene. If we were to add lights, they would also illuminate this cube. If we positioned our camera to look at it, we would see it when we render the scene.
A single scene can contain multiple objects, lights, and even other scenes. For complex applications, you might organize your scene hierarchy to manage different parts of your 3D environment. For now, focus on the idea that the scene is the central hub for all visual elements.
graph TD;
A[Scene] --> B(Object 1);
A --> C(Object 2);
A --> D(Light);
A --> E(Camera);