How to create a scene in Three.js

The previous chapter describes adding objects to the scene. In this article, I plan to describe each function point in detail, on the one hand, to deepen my understanding. On the other hand, I hope to be able to

help those in need.

1. When learning WEBGL, you should first understand the steps required to create a WebGL program. Just like making braised pork with pickled vegetables, what steps are needed.

• Initialize WebGL drawing context

• Initialize shader program

• Establish model and data cache

• Complete drawing and animation

This is a process-oriented programming. However, three.js is different. It is an object-oriented programming. Mainly construct three objects: scene (scene) camera (camera) renderer (renderer).

What do these three things mean? It doesn't sound like I know what it is at all. To give a small example: take movies as an example. The scene is like the entire layout space, and the camera is like the

shooting period. The renderer is equivalent to converting the filmed movie into film, which is the computer screen.

Scenes and spaces contain 3D and data models, while renderer contains shaders and WebGL drawing contexts.

2. THREE.JS creates scene, camera, renderer

The movie, scene, and film are all ready, so how can we display the actors? That is, how to add objects to the scene as mentioned in the above article?

3. Add actors (3D cube).

 //演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh);  //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放

This way the actor is in the frame.

4. How to make this actor move?

    //懂动起来。function loop(){
        requestAnimationFrame(loop);
        mesh.rotation.x += 0.1;  //X选择mesh.rotation.y += 0.1;  //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放    }
    loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
     比如浏览器Tab切换后停止渲染以节约资源、
     和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
     简直就是动画神奇     */

The actor entered the scene and had an impressive effect. The first short story is almost finished.

5. The entire code (originally wanted to be hosted on GitHup). Found it too slow.

6. Three.js plays an important role in WebGL, but there are really few Chinese APIs. It just accumulates slowly one by one.

The above is the detailed content of How to create a scene in Three.js. For more information, please follow other related articles on the PHP Chinese website!