上文 ，給大家介紹了一下開源WebGL框架three.js的一些基本用法。今天主要給大家介紹一下Mesh和Object3D中的一些常用功能。
var geometry = new THREE.BoxGeometry(50, 100, 20);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Mesh，簡單來說就是3D場景中的物體，它繼承自Object3D類，它由兩個基本的組成部分：圖形（Geometry）和材質（Material）或紋理。
圖形 Geometry
三維空間中的幾何體，立方體，球體等，能夠存儲頂點（vertex），位置（positions），面（faces），顏色（colors）等信息。
- BoxGeometry： 立方體
- CylinderGeometry：圓柱體
- SphereGeometry：球體
- TorusGeometry：圓環
- 其它
材質 Material
抽象低聚背景，幾何三角形
- MeshBasicMaterial：為幾何體賦予一種簡單的顏色，或者顯示幾何體的線框
- MeshDepthMaterial：根據網格到相機的距離，該材質決定如何給網格染色
- MeshNormalMaterial：根據物體表面的法向量計算顏色
- MeshFaceMaterial：這是一種容器，可以在該容器中為物體的各個表面上設置不同的顏色
- MeshLambertMaterial：考慮光照的影響，可以創建顏色暗淡，不光亮的物體
- MeshPhongMaterial：考慮光照的影響，可以創建光亮的物體
- ShaderMaterial：使用自定義的著色器程序，直接控制頂點的放置方式，以及像素的著色方式。
- LineBasicMaterial：可以用於THREE.Line幾何體，從而創建著色的直線
- LineDashedMaterial：類似與基礎材質，但可以創建虛線效果
物體的旋轉 Rotation
mesh.rotation.x = Math.PI / 2;//以X軸為軸旋轉90°
mesh.rotation.y = Math.PI / 2;//以Y軸為軸旋轉90°
mesh.rotation.z = Math.PI / 2;//以Z軸為軸旋轉90°
移動 Translate
mesh.translateX(100);//沿X軸移動100.（向右移動）
mesh.translateY(100);//沿Y軸移動100.（向上移動）
mesh.translateZ(100);//沿Z軸移動100.（向屏幕外移動）
Geometry和BufferGeometry
- Geometry 生成的模型是這樣的 （代碼）-> (CUP 進行數據處理，轉化成虛擬3D數據) -> (GPU 進行數據組裝，轉化成像素點，準備渲染) -> 顯示器。第二次操作時重複走這些流程。
- BufferGeometry 生成模型流程 (代碼) -> (CUP 進行數據處理，轉化成虛擬3D數據) -> (GPU 進行數據組裝，轉化成像素點，準備渲染) -> (丟入緩存區) -> 顯示器 第二次修改時，通過API直接修改緩存區數據，流程就變成了這樣 (代碼) -> (CUP 進行數據處理，轉化成虛擬3D數據) -> (修改緩存區數據) -> 顯示器。這樣就節約了GPU性能的運算性能。
- 通常情況下使用vertices屬性來初始化Geometry的點。
geometry.vertices.push(
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( -10, -10, 0 ),
new THREE.Vector3( 10, -10, 0 )
);
- Geometry和BufferGeometry的轉換
var geometry = new THREE.Geometry().fromBufferGeometry(bufferGeometry);
- BBox of Geometry Geometry.boundingBox通常需要先調用Geometry.computeBoundingBox()方法來生成。
- BufferGeometry的BBox可以通過轉成Geometry然後從Geometry中取得。
ExtrudeGeometry和ExtrudeBufferGeometry
這兩個Geometry主要用於對普通的形狀（通常是2D的）進行拉伸，使用方法很合其它類似。但需要先了解Shape和ShapePath。 ExtrudeGeometry繼承自Geometry。 ExtrudeBufferGeometry繼承自BufferGeometry。
小結
在2D的世界裡，一個點由x和y兩個參數確定，而3D的世界裡，一個點是由x，y和z三個參數來確定的，這就是Vector3。當然了，有了點之後，我們就可以在3D的世界裡任意創造想要的圖形。
在3D的世界裡翱翔豈非一朝一夕？多看多練
分享到:
閱讀更多 AngryRED 的文章
