 郭隆邦_技术博客
郭隆邦_技术博客
            关于Threejs材质Material、几何体Geometry、纹理Texture、相机camera等对象如何更新也没必要刻意记忆,只要你能够理解Threejs渲染器的渲染过程,明白threejs为什么要设置一套更新机制,然后用到具体知识查看文档即可。
如果你想深入理解threejs渲染更新机制,首先最好有一定的原生WebGL基础,然后阅读threejs渲染器相关源码和学习本站发布的《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 ();
threejs整个场景的模型是一个树结构,默认的情况下,在threejs执行渲染方法渲染场景的时候,threejs会计算每个节点模型对象的世界矩阵.matrixWorld和本地矩阵.matrix。
关于模型对象矩阵更新的属性和方法可以查看threejs文档关于基类Object3D的介绍。.matrixAutoUpdate 和.matrixWorldNeedsUpdate属性,.updateMatrix () 和.updateMatrixWorld ()方法。
1.https://www.jianshu.com/p/8aa21a1ae6a6
2.https://blog.csdn.net/tjj3027/article/details/82224843