前言
最近自己做一些threejs项目,总结了一些性能优化的关键点,跟大家分享一下。
关键点
1、尽量使用clone方法;
2、不需要的时候一定要dispose;
3、优先使用BufferGeometry;
4、注意图片压缩;
5、重点优化requestAnimationFrame内的方法(描述一);
6、如果有大量外部模型,一定要结合使用gltf-pipeline与Draco(描述二)。
描述一
如果涉及到需要使用animate,尽量在需要渲染的时候来执行内容:
let renderEnabled = false;
const animate = () => {
requestAnimationFrame(animate);
// 设置一个变量 减少没用的执行
if (renderEnabled) {
// 这里是你自己业务上需要的code
controls.update(clock.getDelta());
renderer.render(scene, camera);
}
stats.update();
};
// 需要渲染的时候调用一下即可
const timeRender = (time: number = 3000) => {
renderEnabled = true;
raf.clearTimeout(timeOut);
timeOut = raf.setTimeout(() => {
ren