标签：visible size his webgl nbsp parent highlight examples 压缩文件
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 文件
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
three使用gltf-pipeline压缩 并 加载 gltf 文件。
标签：visible size his webgl nbsp parent highlight examples 压缩文件
原文地址：https://www.cnblogs.com/fanjlqinl/p/14885467.html
