Ładowanie modeli gltfpack w Three.js

Aby wczytać pliki z tego narzędzia za pomocą GLTFLoader, dodaj MeshoptDecoder do obsługi kompresji Meshopt i KTX2Loader do tekstur KTX2. Panel wyników pokazuje rozszerzenia wymagane przez plik.

Zainstaluj zgodne zależności

Użyj przykładu w projekcie npm z narzędziem bundlującym moduły ES, na przykład istniejącej aplikacji Vite. Poniższe wersje odpowiadają podglądowi tej strony. Importy bez ścieżki nie działają przez samo otwarcie pliku JavaScript w przeglądarce.

npm install [email protected] [email protected]

Skopiuj pliki transkodera Basis z zainstalowanego pakietu Three.js do katalogu publicznego. Jeśli standardowy katalog publiczny jest udostępniany w głównym adresie strony, poniższe pliki będą dostępne pod /basis/. Używaj tej samej wersji Three.js co KTX2Loader.

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

Podłącz dekodery przed ładowaniem

Umieść wynik w public/models/optimized.glb i utwórz canvas z id model. Użyj poniższego kodu jako modułu wejściowego aplikacji. Dopasowuje kamerę do granic modelu i odtwarza pierwszą animację, jeśli istnieje.

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

Sprawdź rozszerzenie i nieudane żądanie

Przy ścisłej Content Security Policy sprawdź w konsoli blokowanie Web Workers lub WebAssembly. Świadomie skonfiguruj udostępnianie workerów i WASM; nie usuwaj polityki tylko po to, by ukryć błąd. Sama prawidłowa odpowiedź sieciowa nie potwierdza udanego dekodowania.

Przykład instaluje oba dekodery, aby ładować oba rodzaje wyników. Pliki z teksturami PNG lub JPEG nie potrzebują KTX2Loader. WebP wymaga obsługi przeglądarki i modułu ładowania, ale nie używa transkodera Basis. Gdy aplikacja często zmienia modele, zwalniaj stare geometrie, materiały i tekstury; zwolnij też KTX2Loader, gdy przestanie być potrzebny.

Three.js GLTFLoader · Three.js KTX2Loader

Sprawdź pozostałe wymagania zgodności wyniku →

Dokumentacja silnika: gltfpack