¡Hola, chicos!
He estado haciendo algunos experimentos con three.js, logré reducir un modelo de 70 MB a 10 MB usando Draco, sin embargo, no estoy muy familiarizado con Draco y no he podido encontrar un buen ejemplo sobre cómo usar Draco Loader junto con GLTF Loader, ¿alguien puede mostrarme un buen ejemplo o revisar mi código para ver qué cosas tengo que cambiar para usarlo y cargar el modelo comprimido? ¡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 ); } );Los muchachos lograron que funcionara, solo agreguen para agregar a Draco siguiendo el ejemplo predeterminado de three.js:
Agregar
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 );Para cualquiera que tenga el mismo problema, solo eche un vistazo a este ejemplo: