Muat model gltfpack di Three.js

GLB yang dioptimalkan memerlukan lebih dari sekadar GLTFLoader saja. Panduan ini mencakup pengaturan pemuat untuk keluaran Meshopt dan KTX2 alat ini. Itu tidak memilih pengaturan kompresi; gunakan panel hasil untuk melihat ekstensi mana yang diperlukan file yang diekspor.

Instal dependensi yang cocok

Gunakan contoh ini dalam proyek npm dengan bundler modul ES, seperti aplikasi Vite yang sudah ada. Versi di bawah cocok dengan pemirsa situs ini. Impor telanjang tidak berfungsi hanya dengan membuka file JavaScript di browser.

npm install [email protected] [email protected]

Salin file transcoder Basis dari paket Three.js yang diinstal ke direktori publik Anda. Dengan direktori publik konvensional yang disajikan di root situs, file di bawah ini akan tersedia di bawah /basis/. Simpan 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 decoder sebelum memuat

Letakkan file yang dioptimalkan di public/models/optimized.glb dan buat kanvas dengan model id. Gunakan yang berikut ini sebagai modul entri aplikasi Anda. Ini menyesuaikan kamera ke batas yang dimuat dan memutar animasi pertama saat 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

Di situs dengan Kebijakan Keamanan Konten yang ketat, periksa konsol untuk Pekerja Web yang diblokir atau WebAssembly. Konfigurasikan pekerja aplikasi Anda dan pengiriman WASM dengan sengaja; jangan menghapus kebijakan hanya untuk menyembunyikan kesalahan. Respons jaringan yang berhasil saja tidak memastikan bahwa decoding berhasil.

Contoh ini menginstal kedua decoder sehingga dapat memuat output mana pun. File yang menyimpan tekstur PNG atau JPEG tidak memerlukan KTX2Loader. WebP memerlukan dukungan browser dan pemuat tetapi tidak menggunakan transcoder Basis. Dalam aplikasi dengan perubahan model berulang, buang geometri, bahan, dan tekstur lama; lepaskan pemuat KTX2 bila tidak diperlukan lagi.

Three.js GLTFLoader · Three.js KTX2Loader

Periksa persyaratan kompatibilitas keluaran lainnya →

Referensi mesin: gltfpack