Three.js + Vue 处理glb文件过大问题(DRACOLoader加载压缩glb)

起因,three.js editer导出的glb文件过于庞大,导致部署后文件加载过久

解决方法:

第一步(得有个blender),压缩:

导出时把压缩勾选上

这时候我们会得到一个glb文件,但与three.js editer导出不同的的是,这个文件引入代码中会报如下错误

这个警告表明在使用 THREE.GLTFLoader 时,没有提供 DRACOLoader 实例。DRACOLoader 是用于加载 Draco 压缩格式的模型数据的 loader。如果你的模型使用了 Draco 压缩,你需要为 THREE.GLTFLoader 提供一个 DRACOLoader 实例。

第二步,引入:

点击node_modules找到three,复制以下文件夹

粘贴到public目录

第三步,使用:

在three页面引入DRACOLoader

javascript 复制代码
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'

修改原来的代码为:

javascript 复制代码
const dracoLoader=new DRACOLoader();
      dracoLoader.setDecoderPath('/draco/gltf/');
      // 加载3D模型
      const loader = new GLTFLoader();
      loader.setDRACOLoader(dracoLoader);
      loader.load(this.file, (gltf) => {
//...
})

DRACOLoader能够帮我们解析压缩后的glb,这样就可以解决报错了!

同一模型优化后的结果展示:

相关推荐
中微子3 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君3 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子4 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡5 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4535 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6735 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友5 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir5 小时前
vue3.2 前端动态分页算法
前端·算法