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:
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: