THREEJS性能优化

前言

最近自己做一些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(() => {
    renderEnabled = false;
  }, time);
};

描述二

首先，建议使用gltf或者glb来加载模型。如果有大量外部模型，一定要结合使用gltf-pipeline与Draco。
这很重要，有时候我们获得的gltf模型文件后，我们可以轻易的压缩图片；但有些scene.bin文件可以达到100M或200M以上，模型多了之后会很大程度影响使用体验。
结合使用gltf-pipeline与Draco，可以有效的压缩文件甚至在10M以下！

用法

1、首先你要将three/examples/js/libs/draco文件夹放到public目录下！
2、进入需要压缩的gltf模型文件，执行gltf-pipeline -i scene.gltf -o sceneDraco.gltf -d

执行成功后删除原先的.gltf .bin文件
如果没有安装过gltf-pipeline，使用npm全局安装即可

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

const loader = new GLTFLoader();
// Draco 解码库
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/gltf/');
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.preload();

loader.setDRACOLoader(dracoLoader);
loader.load(
    '***/sceneDraco.gltf',
    (gltf: GLTF) => callBack(gltf),
    (xhr: { loaded: number; total: number }) => {
      console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    },
    (error: ErrorEvent) => {
      console.error('An error happened', error);
    },
  );

github

https://github.com/aisriver