Three.js is a 3D engine running in the browser. You can use it to create various three-dimensional scenes, including cameras, light and shadow, materials and other objects. You can see many wonderful demonstrations on its homepage. However, this engine is still in a relatively immature development stage. Its insufficient API and lack of documentation have increased the difficulty of learning for beginners (especially the lack of documentation). The three.js code is hosted on github.
http://github.com/mrdoob/three.js/
Let's look at the example
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <script type="text/javascript" src="js/three.js" ></script> <style> div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 600px; background-color: #eeeeee; } </style> <script> var renderer; function initThree(){ width = document.getElementById('canvas-frame').clientWidth; height = document.getElementById('canvas-frame').clientHeight; //The renderer determines the rendering result and what element should be drawn on the page and how to draw it. renderer = new THREE.WebGLRenderer({ antialias : true }); renderer.setSize(width,height); //domElement represents the canvas in the renderer, and all renderings are drawn on the document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFF,1.0); } //Camera perspective camera var camera; function initCamera(){ camera = new THREE.PerspectiveCamera(45,width/height,1,10000); camera.position.x = 0; camera.position.y = 1000; camera.position.z = 0; camera.up.y = 0; camera.up.y = 0; camera.up.z = 1; camera.lookAt({ x : 0, y : 0, z : 0 }); } //Scene var scene; function initScene(){ scene = new THREE.Scene(); } //Light var light; function initLight(){ light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(100, 100, 200); scene.add(light); } //Geometry var cube; function initObject(){ //Declared geometry, there is a vertices parameter that can be used to store the point var geometry = new THREE.Geometry(); //LineBasicMaterial(parameters)//basic translation: Basic //Material translation: raw materials //Parameters: is an object that defines the appearance of a material. It contains multiple attributes to define the material. These attributes are //Translation: Parameters //Color: The color of the line, represented in hexadecimal, and the default color is white. //Linewidth //Linecap: The appearance of both ends of the line is rounded end points by default. The effect can only be seen when the line is thicker. //cap translation: Hat//Linejoin: The appearance of the connection point between two lines, rounded corners by default. //join translation: Added//VertexColors: Define whether the line material uses vertex elements, this is a boolean value. It means that the colors of each part of the line are interpolated according to the color of the vertex. //vertex translation: Vertex //Fog: Defines whether the color of the material is affected by global fog effect. //Translation: fog var material = new THREE.LineBasicMaterial({ vertexColors: true }); //Define the two colors that are the colors of the two endpoints var color1 = new THREE.Color( 0x4444444 ), color2 = new THREE.Color( 0xFF0000 ); //The material of the line can be determined by the color of the two points var p1 = new THREE.Vector3(); var p2 = new THREE.Vector3(); p1.set(-100,0,100); p2.set(100,0,-100); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push(color1, color2); //Define the line and three parameters will be passed in here //The first is the geometry geometry, which contains two vertices and vertex colors //The second is the material of the line //The third is the connection method of a group of points var line = new THREE.Line(geometry,material, THREE.LinePieces); //Add lines to the scene.add(line); } function threeStart(){ initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene,camera); } </script> <body onload="threeStart()"> <div id="canvas-frame"></div> </body></html>I hope this example can help you learn three.js