Code first:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; overflow: hidden; } #geometry { width: 1000px; height: 1000px; } </style> <! -- introducing three. Js 3 d engine -- > < script SRC = ". / three. Min. Js "> < / script > <! - the mouse operate three-dimensional scene control -- > < script SRC = ". / OrbitControls. Js "> < / script > < / head > < body > < div id =" geometry "> < / div > < script > / * * * */ var scene = new three.scene (); Var p1 = new THREE.Vector3(0, 0, 0); 0) var p2 = new THREE.Vector3(0, 20, 0) var p3 = new THREE.Vector3(0, 0, 20) geometry.vertices.push(p1, p2, Var material = new THREE.LineBasicMaterial({// color: 0xff0000 // line color //}); Var line = new THREE.Line(Geometry, Var Material = new THREE.PointsMaterial({// color: 0xff3040, // size: Geometry = new THREE.Points(geometry, material); Var p1 = new THREE.Vector3(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0) 0) // var p2 = new THREE.Vector3(0, 50, 0) // var p3 = new THREE.Vector3(0, 0, 50) // geometry.vertices.push(p1, p2, P3) var face = new three. Face3(0, 1, 2) var face = new three. Face3(0, 1, 2) var face = new three. Face3(0, 1, 2) var face = new three. Face3(0, 1, 2) normal) // geometry.faces.push(face) // var material = new THREE.MeshLambertMaterial({ // color: // side: THREE.DoubleSide// two sides visible //}); Var mesh = new THREE. (Geometry, material); Var p1 = new THREE.Vector3(0, 0, 0, 0, 0, 0, 0, 0, 0, 0) 0) // var p2 = new THREE.Vector3(50, 0, 0) // var p3 = new THREE.Vector3(0, 50, 0) // var p4 = new THREE.Vector3(50, 50, 0) // geometry.vertices.push(p1, p2, p3, p4) // var normal = new THREE.Vector3(0, 0, Var face2 = new THREE.Face3(0, 1, 2, normal) // var face2 = new THREE.Face3(3, 2, 1, 2, 1) // var face2 = new THREE. normal) // geometry.faces.push(face1, face2) // var material = new THREE.MeshLambertMaterial({ // color: // side: THREE.DoubleSide// two visible //}); Var mesh = new THREE. (Geometry, material); Add (mesh) color interpolation -- Color triangle var geometry = new THREE.Geometry(); Var p1 = new three. Vector3(0, 0, 0); Var p2 = new three. Vector3(80, 0, 0); Var p3 = new THREE.Vector3(0, 80, 0); Vertices push(p1, P2, p3); Var face = new three. Face3(0, 1, 2, normal); /** / var color1 = new three. Color(0xFF0000); Var color2 = new three. Color(0x00FF00); Var color3 = new three. Color(0x0000FF); Var normal = new three. Vector3(0, 0, 1); // Face. VertexColors. Push (color1, color2, color3); // Define the color geometry of the three vertices of the triangle. Faces. Push (face); / / triangle plane is added to the geometry var material = new THREE. MeshLambertMaterial ({vertexColors: THREE vertexColors, / / will be subject to vertex color side: THREE.DoubleSide}); Var mesh = new THREE. (Geometry, material); // Mesh model object scene.add(mesh); Var point = new three.pointlight (0xffFFFF); point.position.set(0, 0, 200); Scene.add (point); Var ambient = new THREE.AmbientLight(0x999999); scene.add(ambient); /** * camera Settings */ // var width = window.innerWidth; Var width = document.getelementById ('geometry').offsetwidth; Var height = window.innerheight; Var height = document.getelementById ('geometry').offsetheight; Var k = width/height; Var s = 100; OrthographicCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 200, 200); // Set the camera position camera.lookat (scene.position); Var renderer = new three.webglrenderer (); renderer.setSize(width, height); renderer.setClearColor(0xb9d3ff, 1); // Set the background color document.getelementById ('geometry'). AppendChild (renderer.domElement); Function render() {renderer.render(scene, camera); } render(); var controls = new THREE.OrbitControls(camera); / / create the control object controls. AddEventListener (' change ', render); </script> </body>Copy the code

Effect:

The creation of point, line and plane is just a different material method and mesh model method provided in three.js, while the creation of plane is just a triangle formed by three points, two triangles formed by a square, etc., continue to expand…