gltfpack-Modelle in Three.js laden

Um die Ausgaben dieses Tools mit GLTFLoader zu laden, ergänze MeshoptDecoder für Meshopt-Kompression und KTX2Loader für KTX2-Texturen. Die erforderlichen Erweiterungen stehen im Ergebnisfeld.

Passende Abhängigkeiten installieren

Verwende dieses Beispiel in einem npm-Projekt mit ES-Modul-Bundler, etwa einer vorhandenen Vite-Anwendung. Die unten genannten Versionen entsprechen dem Viewer dieser Website. Bloße Paketimporte funktionieren nicht, indem du die JavaScript-Datei einfach im Browser öffnest.

npm install [email protected] [email protected]

Kopiere die Basis-Transcoder-Dateien aus dem installierten Three.js-Paket in dein öffentliches Verzeichnis. Wird dieses wie üblich an der Website-Wurzel ausgeliefert, sind die unten genannten Dateien unter /basis/ erreichbar. Verwende dieselbe Three.js-Version wie für KTX2Loader.

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

Decoder vor dem Laden anbinden

Lege die optimierte Datei unter public/models/optimized.glb ab und erstelle ein Canvas mit der ID model. Verwende den folgenden Code als Einstiegsmodul deiner Anwendung. Er richtet die Kamera an den geladenen Begrenzungen aus und spielt die erste Animation ab, sofern vorhanden.

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

Erweiterung und fehlgeschlagene Anfrage prüfen

Prüfe auf einer Website mit strenger Content Security Policy die Konsole auf blockierte Web Workers oder WebAssembly. Richte die Bereitstellung von Workern und WASM gezielt ein; entferne die Richtlinie nicht bloß, um einen Fehler zu verbergen. Eine erfolgreiche Netzwerkantwort allein bestätigt keine erfolgreiche Dekodierung.

Das Beispiel richtet beide Decoder ein, damit es beide Ausgabearten laden kann. Dateien mit PNG- oder JPEG-Texturen benötigen keinen KTX2Loader. WebP braucht Browser- und Loader-Unterstützung, nutzt aber keinen Basis-Transcoder. Gib bei wiederholten Modellwechseln alte Geometrie, Materialien und Texturen frei; entsorge den KTX2-Loader, sobald er nicht mehr benötigt wird.

Three.js GLTFLoader · Three.js KTX2Loader

Weitere Anforderungen an die Ausgabekompatibilität prüfen →

Engine-Referenz: gltfpack