After seeing the cool effect made by Three.js, I couldn’t help itching and moving, and began to learn, hoping that I could make a beautiful, cool and experienced scene.

Three.js is a JavaScript 3D library.

Three. Js is all about Three things: Screen, camera, renderer. Render the scene through the camera.

The local server runs three.js

1. Download the source code of three.js

Github.com/mrdoob/thre…

2. Install the Node server package globally

npm i http-server -g
Copy the code

3. Execute in the source directory of three.js:

http-server
Copy the code

To start a Node server, you can start the source code locally and run three.js locally.

5. Visit http://localhost:8080 or 127.0.0.1:8080

You can view official documents in the docs directory and official examples in examples.

Create your own scene before you start

Create an HTML file to display three.js, then copy three.js to the js/ directory.

You can open the HTML file directly or start a local server by executing http-server.

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body>  </html>Copy the code

All of the following code is written in an empty <script> tag;

Create a scene

1. Create the scene, camera and renderer first.

// create scene const scene = new three.scene (); // Create camera // three.js has several different cameras, PerspectiveCamera = new THREE.PerspectiveCamera(75, window.innerwidth/window.innerheight, 0.1) 1000); Const renderer = new three. WebGLRenderer(); Renderer. setSize(window.innerWidth, window.innerheight); / / add the renderer element node to the document in an HTML document. The body. The appendChild (the renderer. DomElement accordingly);Copy the code

2. Create a cube and place the cube into the scene

// BoxGeometry contains all the vertices and faces of the cube Const Material = new three. MeshBasicMaterial({color: 0x00ff00}); // Create a cube with geometry and material const cube = new THREE. // Put the cube into the scene scene.add(cube); X, camera.position.y camera.position.z = 5;Copy the code

Render the scene

The above code doesn’t show anything, because there’s no actual rendering yet, and in order to render something, you need a render or animate loop.

function animate() { 
    requestAnimationFrame( animate ); 
    renderer.render( scene, camera ); 
} 
animate();
Copy the code

This way you can see the object. Before you created a cube, you only saw one face because the camera was on top of the cube.

When you print in animate(), you can see that animate() is always executed in a loop.

Let’s change the camera position:

camera.position.x = 1;
camera.position.z = 3;
Copy the code

Let the cube move

Renderer. Render (scene, camera) in animate(); Add the following code above:

Cube. Rotation. X + = 0.01; Cube. Rotation. + y = 0.01;Copy the code

The complete code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <title>three.js demo</title> </head> <body> <script SRC ="js/three.js"></script> <script> // we need three things: scene, camera and renderer, // so that we can render the scene with camera const scene = new THREE.Scene(); Const camera = new THREE.PerspectiveCamera(75, window.innerwidth/window.innerheight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); Cube. Rotation. X + = 0.01; Cube. Rotation. + y = 0.01; renderer.render(scene, camera); console.log("animate"); } animate(); </script> </body> </html>Copy the code

Refer to the link

Threejs.org/docs/index….

www.webgl3d.cn/threejs/doc…

Threejsfundamentals.org/threejs/les…