压缩

• 全局安装 gltf-pipeline

npm install -g gltf-pipeline

• 进入模型文件夹(由于会直接覆盖原文件, 建议先备份), 输入 cmd, 打开命令窗口

• 输入命令 (该实例为 .glb 格式)

// .gltf 压缩
for %i in ('dir *.gltf /s /b') do gltf-pipeline -i %i -o %i -d

// .glb 压缩
for %i in ('dir *.glb /s /b') do gltf-pipeline -i %i -o %i -d

// .gltf 转 .glb, 并压缩
for %i in ('dir ./  *.gltf /s /b') do gltf-pipeline -i %i -o %~ni.glb -d

导入

官方示例:

// Instantiate a loader
const loader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );

// Load a glTF resource
loader.load(
    // resource URL
    'models/gltf/duck/duck.gltf',
    // called when the resource is loaded
    function ( gltf ) {

        scene.add( gltf.scene );

        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Group
        gltf.scenes; // Array<THREE.Group>
        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' );

    }
);

注: setDecoderPath() 的参数为 "/examples/js/libs/draco/", 但这样写会报错:
"Uncaught SyntaxError: Unexpected token '<'"

可做如下修改:

• 复制 node_modules/three/examples/js/libs/ 下的 draco 文件夹至 public/ 目录内
• 修改参数

const dracoLoader = new DRACOLoader()

dracoLoader.setDecoderPath('/draco/')
loader.setDRACOLoader(dracoLoader)