1. 程式人生 > >Three.js 實時更新幾何體的方法

Three.js 實時更新幾何體的方法

基於效能的原因,改變幾何體(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重新進行計算繪製。