three.js性能优化微指南

[1]性能监测

检测FPS

使用stats，这里就不过多说明了

禁用 FPS 限制

监视绘制调用

绘制调用是 GPU 绘制三角形的操作。当我们有一个包含许多对象、几何体、材质等的复杂场景时，会有很多绘制调用。
通常我们可以通过见减少绘制调用来提升性能
这里可以使用这个浏览器扩展来监视绘制调用https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk
具体的使用方式见其说明文档即可

渲染信息

可以通过console.log(renderer.info)打印一些关于渲染器的一些信息

[2]销毁

一旦你确定了某个几何体或者材料等资源不再需要使用，那么就请先将其销毁掉
关于如何销毁，three.js官方有相关的文档：
https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects
例如销毁一个正方体：

scene.remove(cube)
cube.geometry.dispose()
cube.material.dispose()

[3]灯光

尽可能的减少复杂灯光效果的使用，因为消耗性能比较大
同时避免频繁的添加或者删除灯光，因为场景中添加或移除光源时，必须重新编译支持光源的所有材质。这就是Three.js的工作方式，如果你有一个复杂的场景，这可能会冻结屏幕片刻。

[4]阴影

阴影效果也是性能消化较大的部分，如果整体需要比较极致的优化性能这部分可以考虑使用纹理贴图代替阴影。
可以通过优化阴影贴图来达到类似阴影效果，下面是模拟思路：
首先可以使用CameraHelper查看将由阴影贴图摄像机渲染的区域，并将其缩小到尽可能小的区域：

directionalLight.shadow.camera.top = 3
directionalLight.shadow.camera.right = 6
directionalLight.shadow.camera.left = - 6
directionalLight.shadow.camera.bottom = - 3
directionalLight.shadow.camera.far = 10

const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(cameraHelper)

还要尝试使用尽可能小的分辨率，并给出下降 mapSize 结果：

directionalLight.shadow.mapSize.set(1024, 1024)

[5]合理的使用castShadow和Shadow

有些对象可以投射阴影，有些对象可以接收阴影，有些对象可能会同时投射阴影。如果想要考虑性能，可以减少开启castShadow 、receiveShadow 对象

cube.castShadow = true
cube.receiveShadow = false

torusKnot.castShadow = true
torusKnot.receiveShadow = false

sphere.castShadow = true
sphere.receiveShadow = false

floor.castShadow = false
floor.receiveShadow = true

[6]关闭阴影自动更新

阴影贴图会在每次渲染之前更新。可以通过关闭此自动更新并开启 Three.js影子贴图仅在必要时需要更新：