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

标签：

相关文章