three.js加载3d模型_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(() => {

    ren