In the previous chapter, I briefly mentioned the three components in three.js and the steps of how to render them to web pages using three.js. There is no explanation of what webgl and three.js are here. If the two concepts are unclear, please help yourself;
The core code of each step in the previous article will be posted below;
1: Create a scene (scene):
var scene=new THREE.Scene(); //Create a scene by calling the Scene() method of THREE.JS;
2: Create a camera (camera):
var camera=new THREE.PerspectiveCamera(45,width/height,1,1000); //Create a camera
camera.position.set(x,y,z); //Set the position of the camera in space;
Parameter details:
fov: the vertical angle of the camera frustum; aspect ratio of the camera frustum; near: the near cropping plane of the camera frustum;
far: the far cropping plane of the camera frustum;
3: Create a renderer (renderer);
var renderer = new THREE.WebGLRenderer (parameters) ；
renderer.setSize(width,height); //Used to set the size of the canvas, if this value is not set, the size of the rendered canvas will be the default size of the canvas, ie width=300,height=150;
document.body.appendChild(renderer.domElement);//Used to determine which node the renderer is attached to in the web page;
Detailed parameter explanation: parametres is an optional object. It is mentioned here that there is an antialias property in the parametres object. The function of this property is: whether to enable anti-aliasing, so this property is a boolean type, and the default value is false. It is recommended to generally set this value to true (when I first started learning, I didn’t know much about each parameter, so I didn’t set this value at the beginning, so in the effect made, the page will appear all kinds of jaggedness, causing the page It's ugly, and this is also a pit that I stepped on in the learning process 
);
4: Finally use the render method of the renderer to render the scene into the page:
renderer.render(scene,camera);
5: When calling the rendering method of the renderer for rendering, in order to enable the picture to be rendered all the time, the method of the renderer needs to be continuously called; so for the fourth step, it can be written as follows:
funciton loop(){
renderer.render(scene,camera);
requestAnimationFrame(loop)
}
Here, the requestAnimationFrame() method of h5 is used to refresh the loop method regularly. The requestAnimationFrame is similar to the traditional setInterval method, but there are still some differences between them. The difference between them will not be discussed in detail here. If you have any doubts, you can Baidu by yourself.