Threejs加载gltf格式模型,.fbx转.glb格式,压缩gltf模型

最新推荐文章于 2025-04-02 13:05:12 发布

我就要学C++

最新推荐文章于 2025-04-02 13:05:12 发布

阅读量5.9k

点赞数 2

文章标签： threejs模型 nodejs npm Cesium 3d gltf

本文链接：https://blog.csdn.net/qq_33069557/article/details/107253473

版权

本文介绍如何通过将3D模型从fbx格式转换为gltf或glb格式，并利用gltf-pipeline进行压缩，以优化Three.js网页应用的加载速度和用户体验。此外，还提供了在Three.js中加载压缩后的gltf模型的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于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了.