Three.js 實時更新幾何體的方法
阿新 • • 發佈:2019-02-14
基於效能的原因,改變幾何體(Geometry)的某些屬性不會引起瀏覽器對幾何體(Geometry)的重新繪製。THREE.js會快取一些
資料,例如幾何體的頂點和麵的資訊,修改這些屬性的時候需要通知THREE.js去更新幾何體,這些幾何體才能得到重新計算並更新。
需要通知THREE.js更新的幾何體(Geometry)屬性
下面這些屬性的變動需要通知THREE.js更新
1. geometry.vertices
2. geometry.faces
3. geometry.morphTargets
4. geometry.faceVertexUvs
5. geometry.faces[i].normal and geometry.vertices[i].normal
6. geometry.faces[i].color and geometry.vertices[i].color
7. geometry.vertices[i].tangent
8. geometry.lineDistances
通知THREE.js更新
針對不同的屬性變化,都可以設定該幾何體例項的某個屬性值為true來通知THREE.js重新計算這些幾何體並更新,當THREE.js更新了這些幾何體之後,這些屬性值又會重新被設定為false。
//修改幾何體各個面的顏色
this.changeColors = function () {
var mesh = scene.getObjectByName('cube');
mesh.geometry.faces.forEach(function (face) {
face.color.copy(new THREE.Color(Math .random() * 0xffffff));
});
};
//通過將幾何體的colorsNeedUpdate的屬性修改為true,來通知THREE.js該幾何體的顏色發生變化。
var mesh = scene.getObjectByName('cube');
mesh.geometry.colorsNeedUpdate = true;
- colorsNeedUpdate : geometry.faces[i].color and geometry.vertices[i].color發生變化的時候設定為true
- verticesNeedUpdate:geometry.vertices發生變化的時候設定為true
- elementsNeedUpdate:geometry.faces發生變化的時候設定為true
- morphTargetsNeedUpdate:geometry.morphTargets發生變化的時候設定為true
- uvsNeedUpdate:geometry.faceVertexUvs發生變化的時候設定為true
- normalsNeedUpdate:geometry.faces[i].normal and geometry.vertices[i].normal發生變化的時候設定true
- tangentsNeedUpdate:geometry.vertices[i].tangent發生變化的時候設定為true
- needsUpdate:我們也可以動態的修改紋理和材質,材質發生改變的時候將material.needsUpdate設定為true來通知THREE.js重新進行計算繪製。