Three.js模型优化，减面压缩加载。

最新推荐文章于 2024-06-08 14:53:08 发布
最新推荐文章于 2024-06-08 14:53:08 发布
阅读量1.5k 收藏
点赞数
文章标签： javascript 开发语言 ecmascript blender
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50350691/article/details/131519071
版权

记录一下模型加载流程，因为要适配微信小程序，模型文件过大运行卡顿，需要常常修改模型文件，从blender 模型调整到加载过程中所需要的步骤。

1.模型文件比较精细的手动删除不需要部分，然后通过精简修改器减面操作，可最大限度压缩模型文件内存，对模型子 父集合调整好，动画调整到NLM通道，正常导出glb文件。

 

2.电脑切换NVM版本，我装啦两个版本

 一个高版本作为压缩模型所需，一个是为了配合vue版本打开。

输入d:回车进入D盘。在光标处输入 "cd 文件夹"，按Enter就可以进入目标文件夹

 之前用的Draco压缩glb，比较好用，压缩后在chorm浏览器开发模式里面的子父物体集合也能和blender相对应，但是和小程序里不太适配，后改用EXT_meshopt_compression算法压缩glb，效果和Draco差不多，但是网格文件被压缩混乱，子父物体找不到，对后期找相应部件模块影响很大，

最低0.47元/天 解锁文章
你看我白不白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ThreeJs DRACO压缩并加载gltf模型的爬坑记录
bigpatten的博客
10-27 5987
采用DRACO压缩并加载gltf模型的用法，以VUE开发为例 首先，在官方文件中找到对模型进行压缩 所需要的文件 位置大概在项目的examples/js/libs/draco/gltf下，我们可以放在项目的public目录下，如下图所示： 下面来安装gltf-pipeline；该插件的作用是把现有的gltf格式模型进行压缩，跟图片压缩一样。缩小体积，更快的加载。 npm i -g gltf-pipeline 用法：在命令行或终端中输入以下命令，格式为：gltf-pipeline -i 原始文件
ThreeJS加载glb模型实用案例
01-26
glTF相比其他格式如FBX或OBJ，具有更高的压缩效率和更快的加载速度，非常适合Web应用。 在Three.js中加载glTF模型，我们需要使用`THREE.GLTFLoader`。这个加载器是Three.js库的一部分，专门用于处理glTF格式的模型...
three.js 精简小程序版源码，小程序加载3D模型，3D场景，VR全景 适配多个小程序平台
01-11
精简了three.js小程序版的源码，适配小程序端，使用实例可查看资源中的小程序。 关于跨平台： 本人只在微信小程序平台测试过，快手、字节等小程序平台并未测试。 但是由于three.js是基于type为webgl的canvas，所以理论上只要对应小程序平台的canvas支持webgl，这个源码就是可以用的。 几点注意的地方： 1.小程序由于本身占用内存的限制，过于复杂的3D场景会造成运行卡顿。 2.还是出于内存考虑，场景中的光影尽量不要太多，尤其不要开启实时阴影，会直接造成卡顿。 3.加载glb模型时，如果模型过大，会加载时间很长，所以基于小程序平台，尽量先把模型压缩到1.5M以内（我的示例文件中发布的模型基本都是在1.2M以内，完全可以满足小程序端的使用。） 4.页面卸载时，由于资源不会马上释放，所以如果反复进入3D场景页面，会容易造成卡顿。在页面卸载的周期函数中（例如：onUnLoad函数），务必将声明的变量修改为null，这样才可以处发小程序的垃圾回收机制，使程序运行流畅。
关于Web端三维模型文件大、加载慢的思考
qq_54653738的博客
10-30 2250
最近有一个项目是要求能够实现一个网页，这个网页上要加载一个小镇，给的模型比较大，然后就被网络加载速度的问题所困扰。
【Threejs进阶教程-优化篇】3. 卡顿与内存管理(二)
最新发布
qq_42760477的博客
06-08 1072
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，逐步分析贴图，光源，阴影对性能的影响
threejs性能优化之模型压缩.md
12-03
threejs性能优化之模型压缩.md
DRACOExporter 是 Three.js 中的一个工具，用于将 Three.js 中的几何体（Geometry）或缓冲几何体（BufferGeometry）导出为 DRACO 格式的压缩数据。
qq_37030315的博客
03-27 760
demo案例 DRACOExporter 是 Three.js 中的一个工具，用于将 Three.js 中的几何体（Geometry）或缓冲几何体（BufferGeometry）导出为 DRACO 格式的压缩数据。DRACO 是一个开源的压缩库，专门用于几何模型的压缩，它可以显著减小模型的大小而又保持高质量的几何数据。DRACOExporter 提供了一种在 Three.js 中利用 DRACO 编码器将几何体转换为高效的二进制格式的方法。 类允许您将 Three.js 中的几何体导出为 DRACO 格式
three模型优化方案
weixin_46002223的博客
03-25 155
【代码】three模型优化方案。
threejs优化之3D模型压缩
qq_26887683的博客
12-03 5154
threejs优化之3D模型压缩（gltf-pipeline，采用draco压缩算法）
Three.js加载压缩模型-Draco压缩（1.0）
于舒爱
02-29 1069
有人说解码路径可以是：three/examples/jsm/libs/draco/，但是我在netWork上面看一直拿不到draco_wasm_wrapper.js 和 draco_decoder.wasm 两个文件。但是后续还可以使用建模工具进行压缩；后来把draco下的文件放到public下，配置路径改成：floder/THREEJS/libs/wasm/这两天在写一个压缩模型，加载压缩后的模型...在网上找了很多资源，趁热打铁，做个笔记。若要加载压缩后的模型，不可以再使用GLTFLoader。
【Three.js】渲染模型卡顿的优化办法
jiangxinyu50的博客
03-15 9339
优化方法是根据chatGPT的回答下，我这里记录一下，有的方法进行了尝试，有的还没有。
threejs 压缩fbx 转glb
h492248322的博客
12-13 630
threejs fbx转glb
three.min.js 最全的版本
11-01
"three.min.js"是这个库的压缩版，通常用于生产环境，因为它具有较小的文件大小和优化过的代码，从而提高网页加载速度和性能。在这个“最全的版本”中，我们可能找到了Three.js的所有功能和模块，这对于开发者来说是...
three.js模型车展.zip
07-14
2. **main.js**：主要的JavaScript文件，包含了three.js的初始化、场景设置、模型加载、交互逻辑等内容。 3. **style.css**：CSS样式文件，负责页面布局和样式。 4. **模型文件**（如car.gltf或car.obj）：3D车模型...
Three.js加载obj+mtl文件，（机房演示效果图）
12-26
压缩文件包含了一个使用Three.js框架加载obj+mtl模型文件的3d机房实例效果，可用于参考如何使用Three.js加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行（使用火狐浏览器），或者开启本地服务...
Threejs性能优化方向（底层）
dabaooooq的博客
05-18 1221
一、使用交叉顶点数据：用一个数组交叉地保存顶点数据，而不是用独立的顶点数组保存不同的属性，会得到更好的性能，因为顶点数组具有更好的局部内存。例如，把顶点位置读入到变换前顶点缓存时，很可能会把该顶点的法线信息也读入到变换前的顶点缓存中，在需要时供顶点着色器使用。如下
threejs LOD
weixin_43974540的博客
07-15 1745
threejs中提供了LOD可实现根据与相机的distance，从而实现远处减面的操作 通过addLevel ( object : Object3D, distance : Float )将不同精度的对象，add到lod中，distance为到摄像机的距离，具体方法如下 const x=500; const y=500; const z=500; const geometry = [ [ new THREE.CylinderGeometry( R, R,30 ,30,30 ), 20
【threejs加载器】加载gltf模型及压缩模型
popstarqq的博客
05-29 6521
加载obj过程请参考如下两篇 【threejs基础:使用OBJLoader】加载obj模型 【threejs基础：使用MTLLoader】加载材质OBj模型 1 加载gltf模型 效果如下： 第一步：引入GLTFLoader import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 第二步：加载模型 加载模型部分代码很简单；创建加载器、设置gltf文件路径、开始加载文件、添加到scene；代码如下 const
threejs减少模型加载时间(Blender draco压缩)
u014291990的博客
03-28 766
前面几节课给大家说过，通过美术减面，可以把模型文件变小，不过除此外，还可以通过Draco压缩工具，把gltf模型里面的几何顶点数据进一步压缩。物联网、数字孪生、展厅等Web3D可视化项目，通常最大的文件是3D模型文件，再具体就是模型文件中的三角形面、顶点数据。模块，可以通过命令行压缩gltf模型文件，不过这比较麻烦，不采用这种方式，下面给大家演示Blender软件的压缩方式。，这时候你对比下，压缩前后导出的文件大小，理想的情况下，不考虑贴图占用空间，单纯顶点数据，压缩一个数量级也是可能的。
three.js模型贴图压缩详细代码
06-10
以下是使用three.js进行模型贴图压缩的详细代码： 1. 导入必要的three.js库和压缩库 ```javascript <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/DDSLoader.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/MTLLoader.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/OBJLoader.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/OrbitControls.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/DRACOLoader.min.js"></script> ``` 2. 加载模型和纹理 ```javascript var loader = new THREE.OBJLoader(); var mtlLoader = new THREE.MTLLoader(); var ddsLoader = new THREE.DDSLoader(); var dracoLoader = new THREE.DRACOLoader(); mtlLoader.setPath('models/'); mtlLoader.load('model.mtl', function(materials) { materials.preload(); loader.setMaterials(materials); loader.setPath('models/'); loader.load('model.obj', function(object) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = ddsLoader.load('textures/texture.dds'); child.material.map.minFilter = THREE.LinearFilter; child.material.map.magFilter = THREE.LinearFilter; child.material.map.anisotropy = 16; child.material.map.encoding = THREE.sRGBEncoding; } }); scene.add(object); }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function(error) { console.log('An error happened'); }); }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function(error) { console.log('An error happened'); }); ``` 3. 使用DRACO压缩模型 ```javascript dracoLoader.setDecoderPath('js/libs/draco/'); loader.setDRACOLoader(dracoLoader); loader.load('model.drc', function(object) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = ddsLoader.load('textures/texture.dds'); child.material.map.minFilter = THREE.LinearFilter; child.material.map.magFilter = THREE.LinearFilter; child.material.map.anisotropy = 16; child.material.map.encoding = THREE.sRGBEncoding; } }); scene.add(object); }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function(error) { console.log('An error happened'); }); ``` 注意：使用DRACO压缩需要下载DRACO解码器并设置路径。 4. 渲染场景 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = true; camera.position.set(0, 0, 5); var animate = function() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }; animate(); ``` 示例代码中使用了DDS和DRACO格式进行压缩。DDS是一种常用的压缩纹理格式，可以提高加载速度和减少内存占用。DRACO是一种压缩模型格式，可以有效减小模型文件大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值