Three. JS is based on WebGL Javascript open source framework, the effect of the same I also useful WebGL did, “the https://segmentfault.com/a/1190000023078450 links

The HTML part is pretty simple

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>demoThree</title>
</head>
<body>
    <canvas id="demo-three"></canvas>
</body>
<script type="text/javascript" src="./three.js"></script>
<script type="text/javascript" src="./demo_three.js"></script>
</html>
Copy the code

Below is the JS section, where each line of code is explained with a more detailed comment

Const width = 400; const height = 400; const canvas = document.getElementById('demo-three'); // The WebGLRenderer will not associate the DOM element with the HTML DOM element on the final rendered screen without passing an argument. In that case, you need to append the domElement to the body in order for the related canvas to appearletrenderer = new THREE.WebGLRenderer({ canvas }); // Draw the scene and maintain the objects rendered in the sceneletscene = new THREE.Scene(); // To use the orthogonal camera (no perspective effect, suitable for our plane triangle), the orthogonal camera needs to define the coordinates of up, down, left, right, front and rear, so as to specify the orthogonal camera can capture the relevant plane space, the object situation (Angle space interception)letCamera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, -1000, 1000) Renderer. setClearColor(new three.color (0x000000), 1.0); // renderer size renderer.setSize(400, 400); There are many pre-defined geometry options, but no triangles, which can be plotted using shapeGeometrylettriangleShape = new THREE.Shape(); // Move the drawing starting point to (const0, 100) triangleshape.moveto (0, 100); // start line triangleShape. LineTo (-100, -100); triangleShape.lineTo(100, -100); triangleShape.lineTo(0, 100); // Define the geometry of const geometry = new THREE. Const Material = new THREE.MeshBasicMaterial({color: new THREE) const Material = new THREE. Side: THREE.DoubleSide}); // The first parameter Geometry is the coordinates of the geometry we defined earlier, much like the vertex sequences passed in by webGl vertex shaders, which do not contain color information but define geometry shapes. // The second parameter Material is similar to the fragment shaders in webGl, which color the vertex sequencesletmesh = new THREE.Mesh(geometry, material); X = 0; // Set the mesh position in the scene mesh.position.x = 0; mesh.position.y = 0; mesh.position.z = 1; scene.add(mesh); Camera.position. x = 0; camera.position.x = 0; camera.position.x = 0; camera.position.y = 0; camera.position.z = 0; Camera. LookAt (new THREE.Vector3(0, 0, 1));let currentAngle = 0;
let lastTimestamp = Date.now();

function animateConst now = date.now (); const now = date.now (); const now = date.now (); // Subtract old timestamp const duration = now-lasttimestamp; lastTimestamp = now; CurrentAngle = currentAngle + duration / 1000 * math.pi; }function render() { animate(); Set (0, currentAngle, 0); // Rotate the mesh around the y axis Renderer. render(scene, camera); requestAnimationFrame(render); } render();Copy the code

Effect: