threejs引入draco压缩后的模型
更新时间: 2022-12-22 10:38:26
draco是谷歌出的一款模型压缩工具，可以将gltf格式的模型进行压缩用以提高页面加载速度。
# 在threejs中引用
- 首先加载相应的资源
- 引入
threejs,GLTFLoader,DRACOLoader
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
1
2
3
2
3
- 将
three/examples/js/libs/draco/gltf下的所有文件都拷贝至public目录下
- 创建draco加载器
var DRACO_LOADER = new DRACOLoader().setDecoderPath( `../gltf/` );
// 这里保证draco库一定会加载完毕
DRACO_LOADER.preload()
1
2
3
2
3
注意，此处可以用相对路径或者绝对路径，目的是指向刚刚拷贝的draco_decoder.js所在的文件夹
- 创建gltf加载器
let loader = new GLTFLoader();
loader.setDRACOLoader( DRACO_LOADER )
//然后就可以随意加载压缩过的模型啦
loader.load('xxxx.glb',function(gltf) {
console.log(gltf)
scene.add(gltf)
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8