Recently, I have been fiddling with the use of webgl's js library three.js to realize the 3D effect of objects on the web page. In order to deepen my understanding, here is a little experience in the learning process;
1: In three.js, if you want to render objects to web pages, you must first have three components, which are as follows:
1): camera - camera;
2): scene - scene;
3): renderer - renderer;
Among the above three components, the relationship between them can be understood in a simple way. The camera captures the scene and the objects in the scene, and then renders the image captured by the camera in the browser through the renderer;
2: After describing the three components, all we need to do is to implement our code step by step. I won’t post the specific code here, but let’s talk about the implementation steps of the code:
1): First create a scene through the API interface provided by three.js;
2): Similarly, create a camera and renderer through the interface provided by three.js;
3): During the creation process, camera and renderer need to set corresponding parameters respectively;
4): After the above three components are created, we render the object by calling the render method of the created renderer;
3: Today, I mainly record the three components of three.js and the steps of rendering objects on the web page. No code is involved here. The next section will post the detailed code;