[Yugong Series] August 2023 Three.js Topic - Scene

---

foreword

Scene refers to the situations, events and characters that appear in a specific environment. It usually refers to a certain situation in real life or a scene in a fictional world, such as a play, movie, novel, game, etc. The concept and application of scenarios vary across domains and cultures. In the field of design and art, a scene refers to a specific environment or atmosphere, such as exhibition places, street performances, stage design, etc.; in marketing, a scene usually refers to an environment and situation designed for a specific product or service , in order to arouse consumers' positive response and purchase desire.

1. Scene Scene

1. Concept

Three.js scene Scene is one of the most basic objects in Three.js. It is a container that can be added to the renderer, containing all objects and light sources that need to be rendered, etc.

Before creating a scene, you need to create a renderer Renderer and a camera Camera. Then after setting the position of the camera, add it to the scene. A simple scene can be created with the following code:

// 创建场景
var scene = new THREE.Scene();

// 创建渲染器
var renderer = new THREE.WebGLRenderer();

// 设置渲染器大小
renderer.setSize( window.innerWidth, window.innerHeight );

// 将渲染器添加到页面中
document.body.appendChild( renderer.domElement );

// 创建相机
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

// 设置相机位置
camera.position.set( 0, 0, 50 );

// 将相机添加到场景中
scene.add( camera );

We have now created a basic scene and added the camera to it. Next, you can add some objects or light sources to the scene, and then use the renderer to render the scene.

2. Parameters

In addition to parameter settings, the Three.js scene Scene has some other properties and methods, the following is a detailed introduction:

Attributes:

1. uuid: Each scene has a unique uuid attribute value.

2. autoUpdate: A Boolean value indicating whether to automatically update the matrix and other properties of the scene, the default is true.

3. background: The background of the scene, which can be a color value or a Texture object.

4. fog: The fog effect of the scene, which can be null, Fog or FogExp2 object.

5. overrideMaterial: The material override of all objects in the scene, which can be a Material object or null.

6. children: All child objects in the scene, it is an array containing all child objects.

method:

1. add(object): Add a new sub-object to the scene.

2. remove(object): Removes a child object from the scene.

3. getObjectById(id): Get the object in the scene according to the id.

4. getObjectByName(): A unique name can be assigned when creating an object, and the object can be obtained through this method.

5. traverse(callback): traverse all sub-objects in the scene, and call the specified callback function for each object.

6. dispose(): Release all resources in the scene.

7. toJSON(): Serialize the scene into a JSON object.

The above are some commonly used scene properties and methods, which can help us to better operate the scene. In actual use, other attributes and methods can also be used according to requirements to achieve richer scene effects.

3. Case

The following is a complete example of a scene created using Three.js:

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何形状
var geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
var material = new THREE.MeshBasicMaterial({
    
    color: 0x00ff00});

// 创建物体并添加到场景中
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 将相机位置设为(0, 0, 5)
camera.position.z = 5;

// 创建动画函数
function animate() {
    
    
    requestAnimationFrame(animate);
    // 使物体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 渲染场景
    renderer.render(scene, camera);
}

// 开始动画
animate();

This scene creates a green cube and rotates the cube every frame. By setting the camera position to (0, 0, 5), the cube can be displayed in the very center of the screen. Use the function in the animation function requestAnimationFrameto call animatethe function in a loop, so that the scene is continuously updated and rendered.