最近在学习threejs ，然后想着对其做一些性能优化。
1、网格合并
多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时，性能就会成为一个瓶颈。使用组，每个对象还是独立的，仍然需要对它们分别进行处理和渲染。通过THREE.Geometry.merge() 函数，你可以将多个几何体合并起来创建一个联合体。
当我们使用普通组的情况，绘制20000个立方体，帧率在15帧左右，如果我们选择合并以后，再绘制两万，就会发现，我们可以轻松的渲染20000个立方体，而且没有性能的损失。合并的代码如下：
THREE.GeometryUtils.merge() 已经将此方法移动到了 THREE.Geometry 对象的上面了，我们使用 addCube 方法进行立方体的创建，为了确保能正确的定位和旋转合并的 THREE.Geometry 对象，我们不仅向 merge 函数提供 THREE.Geometry 对象，还提供该对象的变换矩阵。当我们将此矩阵添加到 merge 函数后，那么合并的方块将被正确定位。
和组的优缺点对比：
缺点：组能够对每个单独的个体进行操作，而合并网格后则失去对每个对象的单独控制。想要移动、旋转或缩放某个方块是不可能的。
优点：性能不会有损失。因为将所有的的网格合并成为了一个，性能将大大的增加。如果需要创建大型的、复杂的几何体。我们还可以从外部资源中创建、加载几何体。
2、尽量重用 Material 和 Geometry
这里以Material和Geometry为例（使用比较频繁）
改为
3、重点优化requestAnimationFrame内的方法
我们知道几乎所有的资源都是花费在requestAnimationFrame内的方法，所以我们在需要的时候去执行，如果不需要则不执行（按需加载）。
4、删除模型时，将材质和几何体从内存中清除
-
使用 remove() 将模型从场景内删除掉，大家会发现内存基本上没有怎么降低。因为几何体和材质还保存在内存当中，我们需要手动调用 dispose() 方法将其从内存中删除。
-
1. item.geometry.dispose(); //删除几何体
-
2. item.material.dispose(); //删除材质
5、合理执行渲染方法 .render()
Threejs渲染器的.render()方法每次执行都需要调用大量的CPU、GPU等硬件资源，所以为了提高渲染性能，可以考虑尽量减少.render()的执行次数。如果场景有动画效果，就必须周期性执行.render()更新canvas画布图像，如果场景默认是静态的，没有动画，比如展示一个产品、建筑或机械零件的三维模型，只需要在鼠标旋转缩放三维模型，触发.render()执行即可，在没有发生鼠标事件的时候，可以不执行.render()。
不控制Threejs渲染器渲染帧率，通过浏览器提供的requestAnimationFrame()函数实现周期性渲染，理想的情况下requestAnimationFrame()可以实现渲染帧率60FPS，如果threejs需要渲染的场景的比较复杂或者说浏览器所在设备硬件性能不好，可能默认执行效果达不到60FBS。
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
对一些有动画的场景，可以适当控制requestAnimationFrame()函数周期性执行渲染的次数，比如把默认60FBS设置为30FBS。
对于大多数一般处于静态的三维场景，可以不一直周期性执行threejs渲染器方法.render()，根据需要执行.render()，比如通过鼠标旋转模型，就通过鼠标事件触发.render()执行，或者在某个时间段出现动画，就在这个时间段周期性执行.render()，过了这个时间段，就恢复原来状态。
比如鼠标控件OrbitControls，当通过OrbitControls控件旋转缩放三维模型的时候，触发渲染器进行渲染。
// 渲染函数
function render() {
renderer.render(scene, camera);
}
render();
var controls = new THREE.OrbitControls(camera);
//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
controls.addEventListener('change', render);
参考：
