three.js 压缩模型,提升加载速度

最新推荐文章于 2025-10-09 14:10:56 发布
原创 最新推荐文章于 2025-10-09 14:10:56 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #npm

gltf-pipeline是Cesium开发的用于处理gltf和glb模型的Node.js库，能进行模型压缩和格式转换。通过这个工具，可以将贴图包含进模型并压缩，从而减小模型大小，提高加载速度。支持gltf到glb以及glb到gltf的转换。

使用gltf-pipeline压缩gltf、glb模型文件

gltf-pipeline是什么？

gltf-pipeline是cesium开发，基于nodejs的一个开源的gltf、glb模型转换工具，是一个gltf/glb模型的nodejs类库，使用此类库能够对gltf模型做进一步的处理，处理完成的gltf/glb模型，一般是将贴图文件包含到模型内容中，，将模型中的贴图进行压缩，能够减小模型的整体大小，加快模型的浏览速度。

gltf-pipeline的使用

全局安装方式：
	npm i -g gltf-pipeline
在项目中通过命令执行
	gltf-pipeline -i public/model/test01.gltf -o <
最低0.47元/天 解锁文章
july__1
关注
Three.js引擎开发：Three.js渲染技术_（12）.Three.js加载外部模型
chenlz2007的博客
06-13 746
在虚拟现实游戏中，外部模型的加载是实现复杂场景和角色的重要步骤。Three.js 提供了多种加载器，可以加载不同格式的 3D 模型文件，如.obj.glTF.fbx等。本节将详细介绍如何使用 Three.js 加载外部模型，并提供具体的代码示例。
Three.js引擎开发：Three.js基础入门_（9）.Three.js中的加载器与模型导入
chenlz2007的博客
06-05 1158
Three.js提供了多种加载器，每种加载器都针对特定类型的资源。例如，OBJLoader用于加载OBJ格式的模型，GLTFLoader用于加载GLTF格式的模型，用于加载纹理图像等。了解这些加载器的使用方法，可以大大提高开发效率和资源利用率。在Three.js中，加载器是处理外部资源的重要工具，可以帮助开发者轻松地将3D模型、纹理、动画等集成到场景中。通过理解不同加载器的原理和使用方法，可以有效提升开发效率和资源利用率。此外，模型优化和导入的最佳实践也是确保虚拟现实游戏性能和效果的重要手段。
three.js加载3d模型_THREEJS性能优化
weixin_39574869的博客
11-20 5203
前言最近自己做一些threejs项目，总结了一些性能优化的关键点，跟大家分享一下。关键点1、尽量使用clone方法；2、不需要的时候一定要dispose；3、优先使用BufferGeometry；4、注意图片压缩；5、重点优化requestAnimationFrame内的方法（描述一）；6、如果有大量外部模型，一定要结合使用gltf-pipeline与Draco（描述二）。描述一如果涉及到需要使用...
基于 Three.js 的 3D 模型加载优化
vivo互联网技术
07-19 2299
作为一个3D的项目，从用户打开页面到最终模型的渲染加载的时间也会比普通的H5项目要更长一些，从而造成大量的用户流失。为了提升首屏加载的转化率，需要尽可能的降低loading的时间。这里就分享一些我们在模型加载优化方面的心得。
gltf-pipeline 安装与使用教程
最新发布
weixin_43935062的博客
10-09 350
GLB 与 glTF 文件互转模型压缩（Draco）模型优化（去除未使用资源）批量处理模型文件通过合理使用，可以显著减小模型体积、提升 Web 或三维应用加载效率。
【three.js / React-three-fiber】加载3D模型性能优化
weixin_44545357的博客
05-15 2279
本文针对运用*原生three.js*和*react-three/fiber*加载三维模型提供了多种优化性能的方案
threejs优化之3D模型压缩
qq_26887683的博客
12-03 6103
threejs优化之3D模型压缩（gltf-pipeline，采用draco压缩算法）
ThreeJS加载glb模型实用案例
01-26
glTF相比其他格式如FBX或OBJ，具有更高的压缩效率和更快的加载速度，非常适合Web应用。 在Three.js中加载glTF模型，我们需要使用`THREE.GLTFLoader`。这个加载器是Three.js库的一部分，专门用于处理glTF格式的模型...
Three.js加载glb模型的实用案例展示
06-29
与 FBX 或 OBJ 等其他格式相比，glTF 具备更高的压缩效率和更快的加载速度，非常适合 Web 应用场景。在 Three.js 中加载 glTF 模型需要使用 THREE.GLTFLoader，它是 Three.js 库中专门用于处理 glTF 格式模型的加载...
three.js加载压缩过的gltf模型
weixin_47563457的博客
08-23 515
一般来说建模师会给前端一个三维模型；然后剩下的工作就要前端来做了 // 首先你需要安装组件 npm install import-three-examples npm install three 在react 或 vue中如下 import * as THREE from 'three' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { DRACOLoader } from 'three/examples
threejs性能优化之模型压缩.md
12-03
threejs性能优化之模型压缩.md
threejs加载GLTF示例
10-14
threejs使用版本117,GLTF文件是通过revit的接口导出，在model目录下，e'xample目录为threejs的源码目录，很多文件是用不到的，这里没有摘除。
【Three.js】渲染模型卡顿的优化办法
热门推荐
jiangxinyu50的博客
03-15 1万+
优化方法是根据chatGPT的回答下，我这里记录一下，有的方法进行了尝试，有的还没有。
three.js模型及贴图资源预加载
qq_33298964的博客
05-12 1154
three.js预加载，模型、贴图资源预加载，LoadingManager()，loading页在所有资源内容加载完毕之后隐藏
Threejs性能优化
沈行的博客
07-19 1741
three.js性能优化
Three.js模型优化，减面压缩加载。
weixin_50350691的博客
07-03 2181
之前用的Draco压缩glb，比较好用，压缩后在chorm浏览器开发模式里面的子父物体集合也能和blender相对应，但是和小程序里不太适配，后改用EXT_meshopt_compression算法压缩glb，效果和Draco差不多，但是网格文件被压缩混乱，子父物体找不到，对后期找相应部件模块影响很大，只做展示或者其他方法也能用。1.模型文件比较精细的手动删除不需要部分，然后通过精简修改器减面操作，可最大限度压缩模型文件内存，对模型子 父集合调整好，动画调整到NLM通道，正常导出glb文件。
threeJS 模型过大加载速度慢优化体验
qq_46258819的博客
07-11 2188
模型一般都比普通的前端项目要大，普通的模型要在1MB，大一点的就上不封顶了。模型越大，电脑加载的时间就越长。为了避免用户判断为bug，或者随便点击导致产生其他bug。我们需要增加进度条来提示用户。
Three.js加载压缩的glb/gltf文件
weixin_63443072的博客
06-14 536
有些模型文件直接使用GLTFLoader加载会报错，如果格式没有问题的话，很可能就是这个模型文件被压缩了。压缩也是可以加载的更快嘛~现在就来说说这个坑。http://www.webgl3d.cn/pages/09c637/ 这个连接有很详细的说明这个咋个解压或者压缩模型文件的，但是有个地方这句话有坑：大概能就是去找到这个依赖文件夹去复制到某个路径下去，因为我这里用的构建工具，那么打包的话public文件夹下的东西肯定是不会动的，而且会打包到根路径，因此代码要这样写：
Three.js大模型加载与性能优化全解析
本文《Three.js大模型加载优化[代码]》系统性地探讨了从模型预处理到运行时渲染全流程的优化策略，构建了一套完整的“大模型加载优化四步法”，为开发者提供了一条可落地的技术路径。 首先，在**模型预处理阶段**，...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值