【three.js / React-three-fiber】加载3D模型性能优化

一、 引入

无论是大型虚拟世界还是简单的网站，性能优化都是必要的。

特别是在运用三维模型的情况下，我们需要更加深入的优化。因为三维模型通常包含大量的数据和复杂的几何形状，如果不进行性能优化，浏览器可能会因为负载过重而崩溃。

在本文中，我们将探讨如何在three.js / React-three-fiber中对加载三维模型进行性能优化。我们将介绍一些实践方法和技巧，让你的虚拟世界或网站能够以更好的性能运行。

二、 性能监测工具简介：stats.js \ r3f-perf \spector.js

① 写原生three.js可用stats.js

Stats.js是一个轻量级的性能监测库，可以用于监测WebGL或者其他HTML5应用的帧速率、内存使用情况等性能指标。它可以在浏览器中展示FPS（每秒帧数）、渲染时间、内存占用等性能指标，便于开发者实时监测应用程序的性能状况并进行优化。

代码示🌰：

var stats = new Stats();
stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);

function animate() {
   
  stats.begin();

  // monitored code goes here

  stats.end();

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

② 在react-three/fiber可用r3f-perf

r3f-perf是一个React Three Fiber（R3F）的性能分析工具，它可以帮助开发者识别和解决在使用R3F构建WebGL应用程序时可能遇到的性能问题。它提供了实时的性能指标，例如帧率、GPU和CPU使用率、内存使用量等

代码示🌰：

import {
    Canvas } from "@react-three/fiber";
import {
    Perf } from "r3f-perf";

function App() {
   
  return (
    <Canvas>
      <Perf position="bottom-left" />
    </Canvas>
  );
}

③ 用spector.js深入分析

Spector.js可以捕获所有WebGL调用，并将其记录到一个文件中，以便开发人员可以分析和调试应用程序中的问题，不仅有依赖包，还有浏览器插件，数据详细，适用于性能深入分析。

---

三、解决方案

（1） 使用 gltf-pipeline 压缩文件

1. 简单介绍gltf-pipeline

gltf-pipeline 是一个用于转换、