Threejs 开发技巧

1. 性能监控

yarn add stats.js

代码：

2. 渲染信息

3. 释放删除mesh

4. 尽量避免使用Threejs 的Lights

可以使用烘焙的灯光或者自带的AmbientLight, DirectionalLight

5. 不要动态添加或者删除灯光

如果添加或者删除灯光，所有相关的材质都将重新编译。

6. 少用阴影，可以用烘培的阴影替代。

7. 优化阴影的方式：

使用Cambera Helper调试来减少的最小区域。

8.  castShadow 和receiveShadow的使用情况

9. 让阴影自动更新

10. 贴图 Textures

尽量小，保证2的平方大小

11.  不更新顶点

如果需要顶点动画，在顶点着色器里进行。

12.  共享集合体

13. 合并几何体为一个draw call

14. 材质

15. 使用材质类型

MeshBasicMaterial, MeshLamberMaterial, MeshPhongMaterial

16. 网格Meshes

实例化网格，需要为每个实例创建一个矩阵

17.  从Blender 导出

当把模型进行UV拆分的时候，删除隐藏的面，并应用缩放。

选择所有mesh并按crtl+j合并为一个mesh

18. 着色器Shader：

如果变量不需要改变，我们使用全局定义代替在uniforms定义。

在顶点着色器中，这样定义：

19. 着色器中尽量不用Perlin noise，会影响性能，除非用在动画中。可以使用texture2D()代替。

20. 着色器代码中尽量避免使用if语句，用 clamp代替

参考网址：

1. https://github.com/ViNguyen3747/THREE.JS-Tips

2. https://discoverthreejs.com/tips-and-tricks/

做一只爬的最久的乌龟，保持学习保持好奇，即使慢一点，遇到一点困难，只要最后能到达终点，又有什么关系呢。

毕竟人生没有白走的路，每一步都算数。