three.js加载dracoy压缩的gltf模型

three.js 加载draco压缩的gltf模型dracohttps://github.com/google/draco谷歌发起的对3d模型和点云的解压缩库。格式转换我们导出的为obj格式模型，需要先转换为gltf格式文件，转换使用cesiumgs提供的OBJ2GLTF工具同样使用cesiumgs提供的GLTF-PIPELINE将标准的gltf压缩为draco格式的gltf模...

文章共521字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

Bro_Of_Nagi

4794人浏览 · 2020-04-05 09:10:39

Bro_Of_Nagi · 2020-04-05 09:10:39 发布

three.js 加载draco压缩的gltf模型

draco

https://github.com/google/draco

谷歌发起的对3d模型和点云的解压缩库。

格式转换

我们导出的为obj格式模型，需要先转换为gltf格式文件，转换使用cesiumgs提供的OBJ2GLTF工具
同样使用cesiumgs提供的GLTF-PIPELINE将标准的gltf压缩为draco格式的gltf
模型大小对比如下,看起来压缩对顶点数据压缩效率要好，对于纹理多的模型，不太适用了。
模型格式文件大小
obj 11.4M
gltf 14.1M
draco-gltf 9.87M

模型格式	文件大小
obj	11.4M
gltf	14.1M
draco-gltf	9.87M

Three.js 加载模型

three.js提供了GLTF的加载器，该loader也支持对draco格式的文件加载

    //初始化gltfloader，设置模型路径
    let loader = new THREE.GLTFLoader().setPath('models/');
	//设置解压库文件路径
    THREE.DRACOLoader.setDecoderPath('js/draco/gltf/');
	//设置gltfloader解压loader
    loader.setDRACOLoader(new THREE.DRACOLoader());
	//加载模型
    loader.load('qiang_draco.gltf', function (gltf) {
		gltf.scene.traverse(function (child) {
			
		});
		scene.add(gltf.scene);
	});