Scene, Renderer, Camera

Let's take a look at the three most basic things you need to represent something in Three.js: Scenes, Renderers, and Cameras.

Scene

The most fundamental element of implementing 3D graphics in Three.js is the Scene. A Scene is the container of our 3D world, the place where all the 3D objects we want to represent are placed. For example, imagine a movie set. Just as the actors, props, lights, and other elements are all placed within the set, so too is the scene in Three.js the space where all 3D objects are placed.

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

Scene Graph

Scenes use a tree-structured Scene Graph to manage objects. This allows objects to be organized through parent-child relationships.

Each node points to its own local space. In addition, child objects inherit the transformations (position, size, rotation) of the parent object.

// Create the parent object
const parent = new THREE.Object3D();
scene.add(parent);

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

With these properties in place, complex animations are relatively easy to compute and implement. Here's an example

1. Grouping.

// When managing each object individually without a Scene Graph
car.position.x += 10;
wheel1.position.x += 10;
wheel2.position.x += 10;
wheel3.position.x += 10;
wheel4.position.x += 10;

// When using Scene Graph
carGroup.position.x += 10; // all child objects automatically move together

1. Relative position/rotation/size

// position relative to the parent object
const door = new THREE.Mesh(doorGeometry, doorMaterial);
door.position.set(1, 0, 0); // door is positioned to the right relative to the house
house.add(door);

// if the house moves, the door will follow automatically
house.position.set(10, 0, 0);


// For arm swinging animation
// If implemented without Scene Graph, we would have to calculate each time based on the shoulder position
arm.position.x = shoulder.position.x + Math.sin(time) * armLength;
arm.position.y = shoulder.position.y + Math.cos(time) * armLength;

// With the Scene Graph, we can simply rotate it
shoulder.add(arm);
shoulder.rotation.z = Math.sin(time);

Camera

In Three.js, the Camera is the element that determines from what point of view the 3D scene is viewed. Just like a real camera, you can adjust its position, orientation, and field of view to create the desired scene.4

PerspectiveCamera (Perspective Camera)

PerspectiveCamerais a camera that has a perspective, just like a real human eye or camera. PerspectiveCameracreates frustumbased on four properties.

1. FOV (Field of View)

• The angle of the camera's view, in degrees.

1. Aspect Ratio (Aspect Ratio)

• The aspect ratio of the camera viewport.
• Usually uses the width/height ratio of a browser window
• Can also be set to 4:3, 16:9, etc.
• Important property to prevent the screen from looking squashed

1. Near (Minimum Distance)

• The minimum distance the camera can see.
• Objects closer than this distance will not be visible

1. Far (Maximum Distance)

• The maximum distance the camera can see
• Objects farther than this distance will not be visible

Renderer

The Renderer is responsible for taking the information from the Scene and Camera and converting 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 shot during the movie production process into a movie that the audience will actually see.

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

// creating a new scene every frame
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

参照

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