Three.js 实时更新几何体的方法

时间:2021-11-21 04:19:44

基于性能的原因,改变几何体(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重新进行计算绘制。

转至:http://blog.csdn.net/yangnianbing110/article/details/51318884