How to use DRACO Loader with GLTF Loader?

Question

Hello guys!

Been doing some experiments with three.js, managed to get a 70mb model down to 10 MB using draco, however I am not really familiar with Draco and I haven't been able to find a good example on how to use Draco loader together with GLTF Loader, can anyone show me a good example or check my code to see which things I have to change to use it and load the compressed model? TYSM!

 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

Guys just managed to get it working, just add to add Draco by following the three.js default example:

Add

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 );

For anyone having the same issue, just take a look to this example:

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