【three.js-性能优化】three.js性能优化

转载：three.js性能优化

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

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、跳帧设置

var skip;

function render(){

requestAnimationFrame();

if(skip !== 0) {

skip = ++skip % 2;

return;

} else {

skip = ++skip % 2;

}

console.log("i",i);

}

这样每到skip的时候跳过一次渲染执行，以减少渲染次数，在保证不影响用户体验的情况下，尽可能的多跳帧。

7、对粒子群进行转换，而不是每个粒子

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

8、模型的面越少越好，模型过于细致会增加渲染开销

three场景导入模型时，可以在保证最低清晰度的时候，降低模型的复杂度，面越多，模型越大，加载所需开销就越大

9、性能检测插件（stats.js）

使用该插件进行检测帧率，网上有很多使用教程，可以自己百度

10、使用chrome的插件three.js inspector，可以在控制台调试查看场景中的各个模型等

three.js inspector