Carica i modelli gltfpack in Three.js

Un GLB ottimizzato può richiedere più del solo GLTFLoader. Questa guida copre la configurazione del caricatore per l'output Meshopt e KTX2 di questo strumento. Non sceglie le impostazioni di compressione; utilizza il pannello dei risultati per vedere quali estensioni richiede il tuo file esportato.

Installa le dipendenze corrispondenti

Utilizza questo esempio in un progetto npm con un bundler di moduli ES, come un'applicazione Vite esistente. Le versioni seguenti corrispondono al visualizzatore di questo sito. Le semplici importazioni non funzionano semplicemente aprendo il file JavaScript in un browser.

npm install [email protected] [email protected]

Copiare i file del transcoder Basis dal pacchetto Three.js installato nella directory pubblica. Con una directory pubblica convenzionale servita nella radice del sito, i file seguenti saranno disponibili in /basis/. Conservarli della stessa versione Three.js di KTX2Loader.

node -e "require('fs').cpSync('node_modules/three/examples/jsm/libs/basis', 'public/basis', {recursive:true})"

Collegare i decoder prima del caricamento

Inserisci il file ottimizzato in public/models/optimized.glb e crea un canvas con il modello ID. Utilizza quanto segue come modulo di immissione della domanda. Adatta la telecamera ai limiti caricati e riproduce la prima animazione quando presente.

<canvas id="model"></canvas>

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'meshoptimizer';

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#model'), antialias: true,
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 3));
const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(3, 5, 4);
scene.add(light);
const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 1000);

const ktx2 = new KTX2Loader()
  .setTranscoderPath('/basis/')
  .detectSupport(renderer);
const loader = new GLTFLoader()
  .setMeshoptDecoder(MeshoptDecoder)
  .setKTX2Loader(ktx2);

function resize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}
window.addEventListener('resize', resize);
resize();

try {
  await MeshoptDecoder.ready;
  const gltf = await loader.loadAsync('/models/optimized.glb');
  scene.add(gltf.scene);
  const bounds = new THREE.Box3().setFromObject(gltf.scene);
  const center = bounds.getCenter(new THREE.Vector3());
  const radius = Math.max(bounds.getBoundingSphere(new THREE.Sphere()).radius, 0.01);
  const verticalFov = THREE.MathUtils.degToRad(camera.fov);
  const horizontalFov = 2 * Math.atan(Math.tan(verticalFov / 2) * camera.aspect);
  const distance = 1.2 * radius / Math.sin(Math.min(verticalFov, horizontalFov) / 2);
  camera.position.copy(center).add(new THREE.Vector3(1, 0.6, 1).normalize().multiplyScalar(distance));
  camera.near = radius / 100;
  camera.far = distance + radius * 10;
  camera.lookAt(center);
  camera.updateProjectionMatrix();

  const mixer = new THREE.AnimationMixer(gltf.scene);
  if (gltf.animations.length) mixer.clipAction(gltf.animations[0]).play();
  const clock = new THREE.Clock();
  renderer.setAnimationLoop(() => {
    mixer.update(Math.min(clock.getDelta(), 0.1));
    renderer.render(scene, camera);
  });
} catch (error) {
  console.error('Model loading failed:', error);
  const message = document.createElement('p');
  message.textContent = 'Model loading failed. Check the browser console and network requests.';
  document.body.prepend(message);
}

Controlla l'estensione e la richiesta non riuscita

In un sito con una policy di sicurezza dei contenuti rigorosa, controlla la console per verificare la presenza di Web Worker bloccati o WebAssembly. Configura deliberatamente il lavoratore della tua applicazione e la consegna WASM; non rimuovere la policy solo per nascondere un errore. Una risposta di rete riuscita da sola non conferma che la decodifica sia riuscita.

L'esempio installa entrambi i decodificatori in modo da poter caricare entrambi gli output. I file che mantengono le texture PNG o JPEG non necessitano di KTX2Loader. WebP necessita del supporto del browser e del caricatore ma non utilizza il transcodificatore Basis. In un'applicazione con ripetute modifiche al modello, eliminare la vecchia geometria, i materiali e le texture; rilasciare il caricatore KTX2 quando non è più necessario.

Three.js GLTFLoader · Three.js KTX2Loader

Controlla altri requisiti di compatibilità dell'output →

Riferimento motore: gltfpack