[Three.js] Scene, Renderer, Camera

Scene, Renderer, Camera

Let's explore the three most fundamental elements needed to display something in Three.js: Scene, Renderer, and Camera.

Scene

The most basic element when implementing 3D graphics with Three.js is the Scene. A Scene serves as a container for the 3D world, a space where all the 3D objects we want to display are placed. Think of it like a movie set - just as actors, props, and lighting are all arranged on a set, Three.js's Scene is the space where all 3D objects are placed.

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

Scene Graph

The Scene manages objects using a tree structure called a Scene Graph. This allows for systematic organization of objects through parent-child relationships.

Each node in this structure represents a local space. Additionally, child objects inherit transformations (position, size, rotation) from their parent objects.

// Creating a parent object
const parent = new THREE.Object3D();
scene.add(parent);

// Creating a child object and adding it to the parent
const child = new THREE.Mesh(geometry, material);
parent.add(child);

By utilizing these properties effectively, even complex animations can be calculated and implemented relatively easily. Here are some examples:

1. Grouping

   javascript

   // Without Scene Graph, managing each object individually
   car.position.x += 10;
   wheel1.position.x += 10;
   wheel2.position.x += 10;
   wheel3.position.x += 10;
   wheel4.position.x += 10;
   
   // Using Scene Graph
   carGroup.position.x += 10;  // All child objects automatically move together

2. Relative Position/Rotation/Scale

   typescript

   // Setting position relative to the parent object
   const door = new THREE.Mesh(doorGeometry, doorMaterial);
   door.position.set(1, 0, 0);  // The door is positioned to the right of the house
   house.add(door);
   
   // When the house moves, the door automatically follows
   house.position.set(10, 0, 0);
   
   
   // For an arm-waving animation
   // Without Scene Graph, you need to calculate based on shoulder position each time
   arm.position.x = shoulder.position.x + Math.sin(time) * armLength;
   arm.position.y = shoulder.position.y + Math.cos(time) * armLength;
   
   // With Scene Graph, you simply rotate
   shoulder.add(arm);
   shoulder.rotation.z = Math.sin(time);

Camera

In Three.js, the Camera determines from which viewpoint the 3D scene will be observed. Like a real camera, you can adjust its position, direction, field of view, and other properties to express the desired scene.

PerspectiveCamera

This is a camera that has perspective, similar to the human eye or a real camera. The PerspectiveCamera creates a frustum based on four properties:

1. FOV (Field of View)
   • The angle of the camera's view (in degrees)
2. Aspect Ratio
   • The width/height ratio of the camera viewport
   • Usually uses the browser window's width/height ratio
   • Can also be set to ratios like 4:3, 16:9, etc.
   • An important property to prevent the screen from looking distorted
3. Near (Minimum Distance)
   • The minimum distance the camera can see
   • Objects closer than this distance will not be visible
4. Far (Maximum Distance)
   • The maximum distance the camera can see
   • Objects farther than this distance will not be visible

Renderer

The Renderer takes information from the Scene and Camera and converts it into an image that we can actually see on the screen. For example, think of it as the process of developing and processing the original film from a movie production into a movie that actual audiences can watch.

const canvas = document.getElementById('canvas') as HTMLCanvasElement
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight); // Setting screen size
document.body.appendChild(renderer.domElement); // Adding to HTML

// The process of creating a new scene for each frame
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

References

• https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
• https://threejs.org/manual/#en/cameras