three.js性能优化

本文持续更新~~~
参考文章

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在使用的时候，虽然three.js 做了优化，但是在使用不恰当的代码，也会产生性能损耗。帧率越低，给人感觉就越卡。这是我在开发中自己百度总结的，有不对的可以联系我啊

2019-08-22更新———————

1、disppose()方法得重要性
每当你创建一个three.js中的实例时，都会分配一定数量的内存。当你场景中几何体(geometry,bufferGeometry)，材质(material)，纹理(texture)，渲染目标(WebFLRenderTarget)或者其他杂项废弃不用时，这时这些对象在你得代码里已经结束了他们得生命周期，但是three.js系统并不会帮你回收对象，他们依然存在于你的内存中，你需要手动使用dispose()，去主动释放这些资源。

  geometry.dispose();
  material.dispose();
  RenderTarget.dispose();
  texture.dispose();

对于纹理的内部资源仅在图像完全被加载后才会分配。如果你在图像被加载之前废置纹理，什么都不会发生。 没有资源被分配，因此也没有必要进行清理。

2、查看渲染场景信息
WebGLRenderer.info —— 渲染器中的一个特殊属性，具有一系列关于显存和渲染过程的统计信息。 除此之外，它还告诉你有多少纹理、几何体和着色器程序在内部存储。 如果你在你的应用程序中注意到了性能问题，一个较好的方法便是调试该属性，以便轻松识别内存泄漏。

console.log(“this.renderer.info”,this.renderer.info)

2019-08-08更新————-

1、矩阵变换优化
Matrix transformations

这是官网给出的建议，也就是说，当你需要去更新你场景中对象矩阵的时候，会涉及到计算，如果只是静态对象，并且操作不频繁，你可以关闭matrixAutoUpdate参数，手动去更新矩阵

Matrix transformations

但是当你采用第二种方式，去手动更新对象的矩阵，就需要关闭matrixAutoUpdate参数了

2018-08-06———-

1、预加载
在加载页面之前可以给个加载页面的缓冲，因为场景模型没有加载的时候会黑屏，加载一瞬间可能会出现闪屏等性能问题，十分影响用户体验的。

2、能用BufferGeometry代替Geometry的尽量用BufferGeometry
BufferGeometry 会缓存网格模型，性能要高效点。网格模型生成原理

1、Geometry 生成的模型是这样的 （代码）-> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> 显示器
第二次操作时重复走这些流程。

2、BufferGeometry 生成模型流程 (代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> (丢入缓存区) -> 显示器
第二次修改时，通过API直接修改缓存区数据，流程就变成了这样
(代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (修改缓存区数据) -> 显示器

节约了GPU性能的运算性能。

3、少在requestAnimationFrame()动画下面执行操作
因为requestAnimationFrame（）每秒执行60次，你要是在里面加个for循环，你的代码就炸了。还要减少浮点计算，系统对浮点计算开支比较大，尽量写成小数乘法。

4、学会使用clone()方法
var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var box2 = box.clone();//克隆几何体
box2.scale.set(2,2,2);//通过缩放调整大小
clone()返回一个新的几何体对象，返回新的几何体对象包含原来的几何体顶点数据、顶点索引数据、UV坐标数据。就不用重新创建相同的对象，浪费时间，具体详细可以看这篇文章

5、纹理图片尺寸一定得是2的幂次方，并尽可能的小
使用 new THREE.TextureLoader().load( “water.jpg” )加载纹理贴图时，如果不是2的幂次方，那么three.js就会自动转为最合适的2的幂次方尺寸，并在控制台打印出黄色警告。这个不是three.js设置的，是webgl限制的，是为了适合Mipmap（为了加快渲染速度和减少图像锯齿，贴图被处理成由一系列被预先计算和优化过的图片组成的文件）设置。

图片尽可能的小，合并，图片越大不代表越清晰，也会和纹理过滤等各属性有关。降低图片大小，减少内存占用。

6、跳帧设置
// limit framerate to save battery, solution by mrdoob (author of three.js)
// https://stackoverflow.com/questions/11285065/limiting-framerate-in-three-js-to-increase-performance-requestanimationframe
setTimeout(() => {
requestAnimationFrame(this.animateScene);
}, 30);
这样每到skip的时候跳过一次渲染执行，以减少渲染次数，在保证不影响用户体验的情况下，尽可能的多跳帧。

7、对粒子群进行转换，而不是每个粒子
使用THREE.Sprite时，可以更好地控制单个粒子，但是当使用大量的粒子的时候，这个方法的性能会降低，并且会更复杂。此时可以使用THREE.SpriteCloud，可以轻松地管理大量的粒子，进行整体操作，此时对单个粒子的控制能力会减弱。

8、模型的面越少越好，模型过于细致会增加渲染开销
three场景导入模型时，可以在保证最低清晰度的时候，降低模型的复杂度，面越多，模型越大，加载所需开销就越大

9、性能检测插件（stats.js）
使用该插件进行检测帧率，网上有很多使用教程，可以自己百度

three.js stats

10、使用chrome的插件three.js inspector，可以在控制台调试查看场景中的各个模型等
但是你需要将你的场景对象暴漏出来给window，这个插件才可以读取到你的场景信息

this.scene = new THREE.Scene();
window.scene=this.scene

three.js inspector

欢迎转载，转载需带着文章出处链接~~