【webGL】threejs經常使用的api

/*** 場景（scene） ***/
var scene = new THREE.Scene(); // 建立場景
scene.add(x);                  // 插入場景

/*** 相機（camera） ***/
// 正交投影相機
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
// 透視頭像相機
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); // fov：人眼夾角，aspect：長寬比

/*** 渲染器（renderer） ***/
var renderer = new THREE.WebGLRenderer(options);
// options {} 可選。參數：
// canvas：element <canvas></canvas>
renderer.setSize(長, 寬);
element.appendChild(renderer.domElement); // 插入節點
renderer.setClearColor(color, opacity);   // 設置清除後的顏色 16進制
renderer.clear();                         // 清除面板
renderer.render(scene, camera);           // 渲染

/*** 光照(light) ***/
new THREE.AmbientLight(顏色);                          // 環境光
new THREE.PointLight(顏色, 強度, 距離);                // 點光源
new THREE.DirectionalLight(顏色, 亮度);                // 平行光
new THREE.SpotLight(顏色, 強度, 距離, 夾角, 衰減指數); // 聚光燈

/*** 幾何形狀 ***/
new THREE.CubeGeometry(長, 寬, 高, 長的分割, 寬的分割, 高的分割);                           // 立方體
new THREE.PlanGeometry(長,寬, 長的分割, 寬的分割);                                          // 平面
new THREE.SphereGeometry(半徑, 經度切片, 緯度分割, 經度分割, 經度跨過, 緯度開始, 緯度跨過); // 球體
new THREE.CircleGeometry(半徑, 切片數, 開始, 跨過角度);                                     // 圓形
new THREE.CylinderGeometry(頂部面積, 底部面積, 高, 圓分割, 高分割, 是否沒有頂面和底面);     // 圓臺
new THREE.TetrahedronGeometry(半徑, 細節);  // 正四邊形
new THREE.OctahedronGeometry(半徑, 細節);   // 正八邊形
new THREE.IconsahedronGeometry(半徑, 細節); // 正十二邊形
new THREE.TorusGeometry(半徑, 管道半徑, 緯度分割, 經度分割, 圓環面的弧度); // 圓環面
// 自定義形狀
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vectory3(x, y, z)); // 點，其中x、y、z爲座標
geometry.faces.push(new THREE.Faces3(x, y, z));      // 面，其中x、y、z爲點的數組的索引，三點肯定一個面

/*** 材質 ***/
new THREE.MeshBasicMaterial(options); // 基本材質
// options {} 可選。參數：
//   visible：是否可見
//     color：顏色
// wireframe: 是否渲染線而非面
//      side：THREE.FrontSide 正面，THREE.BackSide 反面，THREE.DoubleSide 雙面
//       map: 貼圖
new THREE.MeshLambertMaterial(options); // Lambert材質，適合光照
//  ambient：反射能力
// emissive：自發光顏色
new THREE.MeshPhongMaterial();  // Phong材質，適合金屬和鏡面
//  specular：光罩顏色
// shininess：光斑大小（值越大，光斑越小）
new THREE.MeshNormalMaterial(); // 方向材質
/* 貼圖 */
var texture = THREE.ImageUtils.loadTexture(url, {}, function(){}); // 載入單個貼圖（建議貼圖的長寬爲256的倍數）
new THREE.MeshFaceMaterial() // 設置不一樣面的貼圖，參數爲單個貼圖的數組
texture.wrapS texture.wrapT = THREE.RepeatWrapping // 貼圖的重複方式
texture.repeat.set(x, y)     // 重複次數
new THREE.texture(canvas)    // 將canvas做爲貼圖

/*** 將模型和貼圖結合 ***/
var mesh = new THREE.Mesh(形狀, 材質);
mesh.position // 位置 mesh.position.x（y、z） 或 mesh.position.set(x, y, z)
mesh.scale    // 縮放
mesh.rotation // 旋轉

/*** 監視FPS ***/
var stats = new Stats();
stats.domElement // 節點
stats.begin()    // 開始
stats.end()      // 結束