上文 ,給大家介紹了一下開源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
抽象低聚背景,幾何三角形
物體的旋轉 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的世界裡翱翔豈非一朝一夕?多看多練