three使用gltf-pipeline压缩并加载 gltf 文件。

2021-06-15 15:04:19 阅读：688 来源： 互联网

three作为webgl的天花板总是会碰到各种各样的问题，当使用gltf文件过大时，three加载速度会变慢，可以使用 gltf-pipeline 压缩gltf 来提升加载速度

一，在three中加载 gltf 文件。

1, 使用npm下载three

 cnpm install three -s -d

　2，引入three // 其他配置自行完善

import * as THREE from "three";
********
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

　3，加载gltf 文件　

　　　　　var _this = this;

　　　 let loader = new GLTFLoader();
      loader.load(
        `/3dplane/Camera-Gltf/Camera.gltf`,
        function (gltf) {
          gltf.scene.position.set(0, 0, 0);
          gltf.scene.name = "CoperParentCamera";
          // gltf.scene.scale.set(10, 10, 10);
          // gltf.scene.visible = false;
          _this.scene.add(gltf.scene);
        }
      );

　　刷新页面完成 gltf 加载

二，使用 gltf-pipeline 压缩加载 gltf 文件。

　　1，使用 gltf-pipeline 压缩 gltf 文件

　　　　① 安装 gltf-pipeline

npm install -g gltf-pipeline

　　　 ② 在 gltf 文件夹下打开控制台在控制台中压缩文件

　　　　　1，使用gltf-pipeline将gltf转为glb

gltf-pipeline -i xxxxx.gltf -b -d

　　　　　2，应用Draco压缩

 gltf-pipeline -i xxxx.gltf -o xxxDroc.gltf -d

压缩成功！

　　2，加载压缩后的文件

　　　　下载draco文件 draco文件地址放入public文件夹下

　　　　var loader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("/draco/"); // 存放draco文件的路径
      dracoLoader.preload();
      loader.setDRACOLoader(dracoLoader);

　　　　配置好loader后和gltf文件加载方式一致，注意文件路径即可！

！！！！！！！！！！！！！OK

标签：文件,pipeline,scene,three,gltf,加载
来源： https://www.cnblogs.com/fanjlqinl/p/14885467.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

three使用gltf-pipeline压缩 并 加载 gltf 文件。

three使用gltf-pipeline压缩并加载 gltf 文件。