一、 引入
无论是大型虚拟世界还是简单的网站,性能优化都是必要的。
特别是在运用三维模型的情况下,我们需要更加深入的优化。因为三维模型通常包含大量的数据和复杂的几何形状,如果不进行性能优化,浏览器可能会因为负载过重而崩溃。
在本文中,我们将探讨如何在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 是一个用于转换、