Scene - a Tiny Universe

The scene is a holder for everything we can see. You can think of it as a “tiny universe” in which all your 3D objects live. It serves as a container for all the 3D objects, lights, cameras, and other elements that you want to render and display in your 3D world.

Here's a detailed explanation of what a scene is and how it works:

1. Container for 3D Elements: A Three.js scene is essentially a virtual 3D environment where you can place and arrange all the elements that make up your 3D world. These elements can include objects (e.g., meshes, models), lights (e.g., ambient, directional), cameras, and more.
2. Hierarchy: You can think of a scene as a hierarchical structure that organizes these 3D elements. Each element can be added to the scene, forming a tree-like structure where the scene is at the root, and other elements are its children. This hierarchy allows you to group objects and apply transformations to them as a whole.
3. Rendering: The scene is responsible for rendering the 3D world. When you set up your scene, you define the virtual space in which all your objects exist. The renderer then uses the camera's perspective within the scene to create a 3D representation of the 3D world on the screen.
4. Multiple Scenes: You can create and manage multiple scenes in a Three.js application. This can be useful for creating different views or environments within your application. For example, you might have one scene for a game level and other for a menu screen.
5. Manipulation and Interaction: You can manipulate and interact with objects within the scene. This includes moving, rotating, scaling, and animating objects. You can also add event listeners to objects within the scene to respond to user interactions, such as clicks or mouse movements.

Example:

// Creating a Three.js Scene
const scene = new THREE.Scene();

// Adding Objects to the Scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Adding Lights to the Scene
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

Creating a Scene:

Creating a scene in Three.js is the first step in building a 3D environment. You can create a scene using the THREE.Scene() constructor. A scene acts as a container for all the 3D objects, lights, cameras, and other elements you want to display in your 3D world. Here's How you can create a basic scene:

const scene = new THREE.Scene();

Adding Objects to the Scene:

Once you have a scene, you can add 3D objects to it. Objects in Three.js are created as meshes, which combine geometry (shape) and material (appearance). Here's an example of creating a simple cube and adding it to the scene:

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Adding Lights to the Scene:

Lighting is crucial for realistic 3D rendering. Three.js supports various types of lights, such as ambient, directional, point, and spotlights. Here's an example of adding a point light to the scene:

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

Creating a Camera:

To view your 3D scene, you need a camera. Three.js provides several camera types, with the PerspectiveCamera being the most commonly used for 3D scenes. You set the camera's position, field of view, and other properties:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

Creating a Renderer:

The renderer in Three.js is responsible for taking the 3D scene and rendering it to the screen. You can typically create a WebGL renderer, set its size to match the viewport, and append its DOM element to your HTML document:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Rendering the Scene:

To visualize the 3D scene, you need to render it using the camera and renderer. This is typically done in an animation loop (often using requestAnimationFrame) to update the scene continuously:

const animate = () => {
  requestAnimationFrame(animate);

  // Perform any animations or updates here

  renderer.render(scene, camera);
};

animate();

Manipulating Objects in the Scene:

You can manipulate objects in the scene by changing their properties such as position, rotation, and scale. For example, to rotate the cube in the scene:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;