Three.js 更新机制

发布于 2021-09-11 22:39:56 字数 3041 浏览 1801 评论 0

关于 Threejs 材质 Material、几何体 Geometry、纹理 Texture、相机camera等对象如何更新也没必要刻意记忆，只要你能够理解Threejs渲染器的渲染过程，明白 threejs 为什么要设置一套更新机制，然后用到具体知识查看文档即可。

在大多数场景下，Threejs 渲染的时候很多数据不需要每次渲染都要更新，只是在特定的情况下才更新。为了更好的渲染性能，Threejs 设置了一套默认的更新机制，对于一些不经常更新的对象，three.js默认是不更新，如果有相关的更新发生，可以手动更新。

threejs 官方文档介绍：如何更新场景（How to update things）

纹理对象更新 `Texture`

比如把canvas对象作为材质的颜色纹理贴图，如果canvas发生了变化就需要更新纹理对象，如果不更新纹理对象，canvas的变化不会反映到网格模型的贴图上。

如果你有兴趣可以阅读Three.js渲染器源码，Threejs渲染器在执行.render()方法进行渲染的时候，会判断纹理对象Texture的.needsUpdate属性是是否是true，如果是就更新纹理，然后设置为false，如果下次执行的时候，threejs判断.needsUpdate属性值是false，就不用在浪费资源更新纹理，节约资源，提高性能。

texture.needsUpdate = true;
// 或者通过材质访问纹理对象
// mesh.material.map.needsUpdate = true;

相机对象

如果相机对象与投影矩阵相关的属性发生了变化，就需要手动更新相机的投影矩阵，执行camera.updateProjectionMatrix();的时候，threejs会重新计算相机对象的投影矩阵值，如果相机对象的投影矩阵相关属性没有变化，每次执行.render()方法的时候，都重新计算相机投影矩阵值，会浪费不必要的计算资源,一般来说就是首次渲染计算一次，后面不执行.updateProjectionMatrix()方法threejs不会读取相机相关属性重新计算投影矩阵值，直接使用原来的值就可以。

无论正投影相机还是投影投影相机对象的.near和.far属性变化，都需要手动更新相机对象的投影矩阵。

比如透视投影相机对象的.aspect、.fov属性变化，会影响相机的投影矩阵属性.projectionMatrix,需要执行.updateProjectionMatrix ()更新相机对象的投影矩阵属性

camera.aspect = window.innerWidth / window.innerHeight;
// 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
// 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
// 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
camera.updateProjectionMatrix();

正投影相机对象的.left、.right、.top、.bottom等属性变化，需要执行camera.updateProjectionMatrix ();更新相机对象的投影矩阵属性

// 重置相机投影的相关参数
k = window.innerWidth/window.innerHeight;
camera.left = -s*k;
camera.right = s*k;
camera.top = s;
camera.bottom = -s;
camera.updateProjectionMatrix ();