由于gltf和glb格式的模型对于网页端加载是比较友好的,所以将Threejs网页中导入的模型转换为该格式,能够大大提升用户体验。下面来看一下基本步骤。
1.fbx转.glb格式
由3D软件导出的带有纹理和颜色的.fbx
模型 , 可以通过win10自带的3D查看器
来打开 , 并且另存为.glb
格式。
2.压缩 gltf/glb 模型
可以通过nodejs的npm下载用苦啊压缩gltf/glb的包。
没安装nodejs的先安装nodejs,教程在这
安装完成nodejs之后, 在安装路径的这个路径:例如C:\Program Files\nodejs\node_modules\npm
下执行命令
npm install -g gltf-pipeline
安装完成之后
打开命令行,cd
或者powershell
到.glb/gltf
模型的文件夹,输入如下 命令进行压缩:
gltf-pipeline -i model.gltf -o modelDraco.gltf -d
model.gltf
为初始模型的名称
modelDraco.gltf
为结果模型名称
等待一段时间后,即可在该文件夹得到压缩后的模型。
3.THREEJS加载gltf格式
//加载GLTF格式的模型,Web页面速度快,兼容性好
var loader = new THREE.GLTFLoader();
// Optional:DRACOLoader提供压缩的gltf/glb的解码,对于压缩过一遍的gltf需要使用这个选项
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('../build/libs/draco/');
loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.load('ThreeJs/gltf/company2.gltf',
// called when the resource is loaded
function ( gltf ) {
gltf.scene.scale.set(0.0001,0.0001,0.0001);
//gltf.scene是所有模型的group对象,存着所有的模型
console.log(gltf.scene);
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Scene
gltf.scenes; // Array<THREE.Scene>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened :'+error );
}
);
dracoLoader.setDecoderPath('../build/libs/draco/');
这个路径要定位到你的threejs中的draco文件夹下。
综上就Ok了.