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

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

draco

https://github.com/google/draco

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

格式转换

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

   模型格式	文件大小
   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);
	});