如何使用DRACO装载机与GLTF装载机？

Question

你好伙计们！

一直在用three.js做一些实验，设法用draco将70 MB的模型降低到10 MB，但是我对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