Laad gltfpack-modellen in Three.js

Een geoptimaliseerde GLB kan meer nodig hebben dan alleen GLTFLoader. Deze handleiding behandelt de instellingen van de lader voor de Meshopt- en KTX2-uitvoer van dit hulpmiddel. Het kiest geen compressie-instellingen; gebruik het resultatenpaneel om te zien welke extensies uw geëxporteerde bestand vereist.

Installeer overeenkomende afhankelijkheden

Gebruik dit voorbeeld in een npm-project met een ES-modulebundelaar, zoals een bestaande Vite-applicatie. De onderstaande versies komen overeen met de kijker van deze site. Kale import werkt niet door simpelweg het JavaScript-bestand in een browser te openen.

npm install [email protected] [email protected]

Kopieer de Basis-transcoderbestanden van het geïnstalleerde Three.js-pakket naar uw openbare map. Met een conventionele openbare map in de hoofdmap van de site, zijn de onderstaande bestanden beschikbaar onder /basis/. Bewaar ze uit dezelfde Three.js-versie als KTX2Loader.

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

Sluit de decoders aan voordat u gaat laden

Plaats het geoptimaliseerde bestand op public/models/optimized.glb en maak een canvas met ID-model. Gebruik het volgende als uw aanvraaginvoermodule. Het past de camera aan de geladen grenzen aan en speelt de eerste animatie af indien aanwezig.

<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 het mislukte verzoek

Op een site met een strikt Content Security Policy controleert u de console op geblokkeerde Web Workers of WebAssembly. Configureer de worker- en WASM-levering van uw applicatie bewust; verwijder het beleid niet alleen om een ​​fout te verbergen. Een succesvolle netwerkreactie alleen bevestigt niet dat de decodering is geslaagd.

In het voorbeeld worden beide decoders geïnstalleerd, zodat beide uitgangen kunnen worden geladen. Bestanden die de texturen PNG of JPEG behouden, hebben KTX2Loader niet nodig. WebP heeft browser- en laderondersteuning nodig, maar maakt geen gebruik van de Basis-transcoder. In een toepassing met herhaalde modelwijzigingen moet u oude geometrie, materialen en texturen weggooien; laat de KTX2-lader los wanneer deze niet langer nodig is.

Three.js GLTFLoader · Three.js KTX2Loader

Controleer andere uitvoercompatibiliteitsvereisten →

Motorreferentie: gltfpack