gltfpack-modellen laden in Three.js

Om de uitvoer van deze tool met GLTFLoader te laden, voeg je MeshoptDecoder toe voor Meshopt-compressie en KTX2Loader voor KTX2-texturen. In het resultaatpaneel zie je welke extensies je bestand nodig heeft.

Installeer overeenkomende afhankelijkheden

Gebruik dit voorbeeld in een npm-project met een ES-modulebundler, zoals een bestaande Vite-toepassing. De onderstaande versies komen overeen met de viewer van deze site. Imports zonder pad werken niet door het JavaScript-bestand simpelweg in een browser te openen.

npm install [email protected] [email protected]

Kopieer de Basis-transcoderbestanden uit het geïnstalleerde Three.js-pakket naar je public-map. Als die map op de hoofd-URL van de site wordt aangeboden, staan de onderstaande bestanden onder /basis/. Gebruik bestanden uit dezelfde Three.js-versie als KTX2Loader.

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

Koppel de decoders vóór het laden

Plaats het geoptimaliseerde bestand in public/models/optimized.glb en maak een canvas met id model. Gebruik het volgende als startmodule van je toepassing. De code past de camera aan de geladen afmetingen aan en speelt de eerste animatie af als die aanwezig is.

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

Controleer de extensie en de mislukte aanvraag

Controleer bij een strikte Content Security Policy de console op geblokkeerde Web Workers of WebAssembly. Richt het aanbieden van workers en WASM bewust in; verwijder het beleid niet om een fout te verbergen. Alleen een geslaagd netwerkantwoord bewijst niet dat het decoderen is gelukt.

Het voorbeeld stelt beide decoders in om beide soorten uitvoer te kunnen laden. Bestanden met PNG- of JPEG-texturen hebben KTX2Loader niet nodig. WebP vereist ondersteuning in browser en lader, maar gebruikt de Basis-transcoder niet. Bij herhaald wisselen van modellen moet je oude geometrie, materialen en texturen vrijgeven; geef ook de KTX2-lader vrij als die niet meer nodig is.

Three.js GLTFLoader · Three.js KTX2Loader

Andere compatibiliteitsvereisten controleren →

Enginereferentie: gltfpack