如何将 DRACO Loader 与 GLTF Loader 一起使用？

Question

大家好！

一直在用 three.js 做一些实验，设法使用 draco 将 70mb 的模型缩小到 10MB，但是我对 Draco 不是很熟悉，而且我没能找到一个很好的例子如何将 Draco 加载器与 GLTF 加载器一起使用，任何人都可以给我一个很好的例子或检查我的代码以查看我必须更改哪些内容才能使用它并加载压缩模型吗？泰斯姆！

    import * as THREE from '../build/three.module.js';
        import Stats from './jsm/libs/stats.module.js';
        import { OrbitControls } from './jsm/controls/OrbitControls.js';
        import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

        let camera, scene, renderer, stats;
        var raycaster, mouse = { x : 0, y : 0 };
        var objects = []; 
        var selectedObject;


        init();
        animate();

        function init() {

            const container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
            camera.position.set( - 1.8, 0.6, 2.7 );

            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xa0a0a0 );
            raycaster = new THREE.Raycaster();


            const hemiLight = new THREE.HemisphereLight( 0xa0a0a0,  0xa0a0a0, 2);
            scene.add(hemiLight);


                // model
                
                        const loader = new GLTFLoader().setPath( 'models/fbx/lowlight3_out/' );
                        loader.load( 'lowlight3.gltf', function ( gltf ) {

                            gltf.scene.traverse( function ( child ) {

                        if ( child.isMesh ) {

                            child.castShadow = true;
                            child.receiveShadow = true;


                        }

                    } );

                    scene.add( gltf.scene );

                } );

Answer 1

伙计们刚刚设法让它工作，只需按照 three.js 默认示例添加添加 Draco：

添加

import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

&

                    const loader = new GLTFLoader().setPath( 'models/fbx/compressed/' );
                    const dracoLoader = new DRACOLoader();
                    dracoLoader.setDecoderPath( './js/libs/draco/' );
                    loader.setDRACOLoader( dracoLoader );

遇到同样问题的人，请看一下这个例子：

https://threejs.org/docs/#examples/en/loaders/GLTFLoader

如何将 DRACO Loader 与 GLTF Loader 一起使用？

How to use DRACO Loader with GLTF Loader?

javascript

three.js