Memuat model gltfpack di Three.js

Untuk memuat hasil alat ini dengan GLTFLoader, tambahkan MeshoptDecoder untuk kompresi Meshopt dan KTX2Loader untuk tekstur KTX2. Periksa panel hasil untuk mengetahui ekstensi yang diperlukan file Anda.

Instal dependensi yang cocok

Gunakan contoh ini dalam proyek npm dengan bundler ES-module, misalnya aplikasi Vite yang sudah ada. Versi di bawah sesuai dengan penampil situs ini. Import menggunakan nama paket tidak bekerja hanya dengan membuka file JavaScript di browser.

npm install [email protected] [email protected]

Salin file transkoder Basis dari paket Three.js terpasang ke direktori public. Jika direktori public disajikan dari root situs seperti umumnya, file berikut tersedia di /basis/. Gunakan file dari versi Three.js yang sama dengan KTX2Loader.

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

Hubungkan dekoder sebelum memuat

Letakkan file hasil optimasi di public/models/optimized.glb dan buat canvas dengan id model. Gunakan kode berikut sebagai modul awal aplikasi. Kode menyesuaikan kamera dengan batas model yang dimuat dan memainkan animasi pertama jika ada.

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

Periksa ekstensi dan permintaan yang gagal

Pada situs dengan Content Security Policy ketat, periksa konsol untuk Web Worker atau WebAssembly yang diblokir. Konfigurasikan penyajian worker dan WASM aplikasi dengan tepat; jangan menghapus kebijakan hanya untuk menyembunyikan galat. Respons jaringan berhasil saja tidak memastikan dekode berhasil.

Contoh memasang kedua dekoder agar dapat memuat kedua jenis output. File yang mempertahankan tekstur PNG atau JPEG tidak memerlukan KTX2Loader. WebP perlu dukungan browser dan pemuat, tetapi tidak memakai transkoder Basis. Pada aplikasi yang sering mengganti model, lepaskan geometri, material, dan tekstur lama; lepaskan pemuat KTX2 saat tidak lagi diperlukan.

Three.js GLTFLoader · Three.js KTX2Loader

Periksa persyaratan kompatibilitas output lainnya →

Referensi mesin: gltfpack