Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 );
Guys just managed to get it working, just add to add Draco by following the three.js default example:
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
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.