gltfpack modellerini Three.js'ya yükleyin

Optimize edilmiş bir GLB, tek başına GLTFLoader'dan daha fazlasına ihtiyaç duyabilir. Bu kılavuz, bu aracın Meshopt ve KTX2 çıkışı için yükleyici kurulumunu kapsar. Sıkıştırma ayarlarını seçmez; Dışa aktarılan dosyanızın hangi uzantılara ihtiyaç duyduğunu görmek için sonuç panelini kullanın.

Eşleşen bağımlılıkları yükleyin

Bu örneği, mevcut bir Vite uygulaması gibi bir ES modülü paketleyicisine sahip bir npm projesinde kullanın. Aşağıdaki sürümler bu sitenin görüntüleyicisiyle eşleşiyor. Çıplak içe aktarma, JavaScript dosyasının bir tarayıcıda açılmasıyla çalışmaz.

npm install [email protected] [email protected]

Temel kod dönüştürücü dosyalarını kurulu Three.js paketinden genel dizininize kopyalayın. Site kökünde sunulan geleneksel bir genel dizinle, aşağıdaki dosyalar /basis/ altında bulunacaktır. Bunları KTX2Loader ile aynı Three.js sürümünden tutun.

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

Kod çözücüleri yüklemeden önce bağlayın

Optimize edilmiş dosyayı public/models/optimized.glb konumuna yerleştirin ve kimlik modeliyle bir tuval oluşturun. Aşağıdakileri uygulama giriş modülünüz olarak kullanın. Kamerayı yüklenen sınırlara sığdırır ve mevcut olduğunda ilk animasyonu oynatır.

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

Uzantıyı ve başarısız isteği kontrol edin

Katı bir İçerik Güvenliği Politikasına sahip bir sitede, konsolun engellenen Web Çalışanları veya WebAssembly olup olmadığını kontrol edin. Uygulamanızın çalışanını ve WASM dağıtımını bilinçli olarak yapılandırın; Yalnızca bir hatayı gizlemek için politikayı kaldırmayın. Başarılı bir ağ yanıtı tek başına kod çözmenin başarılı olduğunu doğrulamaz.

Örnek, her iki kod çözücüyü de yükler, böylece her iki çıkışı da yükleyebilir. PNG veya JPEG dokularını tutan dosyaların KTX2Loader'ya ihtiyacı yoktur. WebP, tarayıcı ve yükleyici desteğine ihtiyaç duyar ancak Temel kod dönüştürücüyü kullanmaz. Tekrarlanan model değişikliklerinin olduğu bir uygulamada eski geometriyi, malzemeleri ve dokuları atın; Artık ihtiyaç duyulmadığında KTX2 yükleyiciyi serbest bırakın.

Three.js GLTFLoader · Three.js KTX2Loader

Diğer çıktı uyumluluğu gereksinimlerini kontrol edin →

Motor referansı: gltfpack