1 /**
 2  * 場景（scene）
 3  */
 4 var scene = new THREE.Scene(); // 建立場景
 5 scene.add(x);                  // 插入場景
 6 /**
 7  * 相機（camera）
 8  */
 9 // 正交投影相機
10 var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
11 // 透視頭像相機
12 var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //
 
 fov：人眼夾角，aspect：長寬比
13 /**
14  * 渲染器（renderer）
15  */
16 var renderer = new THREE.WebGLRenderer(options);
17 // options {} 可選。引數：
18 // canvas：element <canvas></canvas>
19 renderer.setSize(長, 寬);
20 element.appendChild(renderer.domElement); // 插入節點
21 renderer.setClearColor(color, opacity);   // 設定清除後的顏色 16進位制
 

22 renderer.clear();                         // 清除面板
23 renderer.render(scene, camera);           // 渲染
24 /**
25  * 光照(light)
26  */
27 new THREE.AmbientLight(顏色);                          // 環境光
28 new THREE.PointLight(顏色, 強度, 距離);                // 點光源
29 new THREE.DirectionalLight(顏色, 亮度);                //
 
 平行光
30 new THREE.SpotLight(顏色, 強度, 距離, 夾角, 衰減指數); // 聚光燈
31 /**
32  * 幾何形狀
33  */
34 new THREE.CubeGeometry(長, 寬, 高, 長的分割, 寬的分割, 高的分割);                           // 立方體
35 new THREE.PlanGeometry(長,寬, 長的分割, 寬的分割);                                          // 平面
36 new THREE.SphereGeometry(半徑, 經度切片, 緯度分割, 經度分割, 經度跨過, 緯度開始, 緯度跨過); // 球體
37 new THREE.CircleGeometry(半徑, 切片數, 開始, 跨過角度);                                     // 圓形
38 new THREE.CylinderGeometry(頂部面積, 底部面積, 高, 圓分割, 高分割, 是否沒有頂面和底面);     // 圓臺
39 new THREE.TetrahedronGeometry(半徑, 細節);  // 正四邊形
40 new THREE.OctahedronGeometry(半徑, 細節);   // 正八邊形
41 new THREE.IconsahedronGeometry(半徑, 細節); // 正十二邊形
42 new THREE.TorusGeometry(半徑, 管道半徑, 緯度分割, 經度分割, 圓環面的弧度); // 圓環面
43 // 自定義形狀
44 var geometry = new THREE.Geometry();
45 geometry.vertices.push(new THREE.Vectory3(x, y, z)); // 點，其中x、y、z為座標
46 geometry.faces.push(new THREE.Faces3(x, y, z));      // 面，其中x、y、z為點的陣列的索引，三點確定一個面
47 /**
48  * 材質
49  */
50 new THREE.MeshBasicMaterial(options); // 基本材質
51 // options {} 可選。引數：
52 //   visible：是否可見
53 //     color：顏色
54 // wireframe: 是否渲染線而非面
55 //      side：THREE.FrontSide 正面，THREE.BackSide 反面，THREE.DoubleSide 雙面
56 //       map: 貼圖
57 new THREE.MeshLambertMaterial(options); // Lambert材質，適合光照
58 //  ambient：反射能力
59 // emissive：自發光顏色
60 new THREE.MeshPhongMaterial();  // Phong材質，適合金屬和鏡面
61 //  specular：指定該材質的光亮程度及其高光部分的顏色，如果設定成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質，如果設定成grey灰色，則看起來像塑料
62 // shininess：光斑大小（值越大，光斑越小）
63 // alphaTest: 透明度
64 new THREE.MeshDepthMaterial()：//根據網格到相機的距離，該材質決定如何給網格染色
65 new THREE.MeshNormalMaterial()：//方向材質，根據物體表面的法向量計算顏色
66 new THREE.MeshFaceMaterial() // 設定不同面的貼圖，引數為單個貼圖的陣列
67 /**
68  * 貼圖
69  */
70 var texture = new THREE.TextureLoader().load(url);
71 texture.wrapS texture.wrapT = THREE.RepeatWrapping // 貼圖的重複方式
72 texture.repeat.set(x, y)     // 重複次數
73 new THREE.texture(canvas)    // 將canvas作為貼圖
74 /**
75  * 模型貼圖結合
76  */
77 var mesh = new THREE.Mesh(形狀, 材質);
78 mesh.position // 位置 mesh.position.x（y、z） 或 mesh.position.set(x, y, z)
79 mesh.scale    // 縮放
80 mesh.rotation // 旋轉
81 /**
82  * 狀態監視PFS
83  */
84 var stats = new Stats();
85 stats.domElement // 節點
86 stats.begin()    // 開始
87 stats.end()      // 結束