gltfpack modellerini Three.js'te yükleme

Bu aracın çıktısını GLTFLoader ile yüklemek için Meshopt sıkıştırmasına MeshoptDecoder, KTX2 dokularına KTX2Loader ekleyin. Dosyanızın gerektirdiği uzantıları sonuç panelinden kontrol edin.

Eşleşen bağımlılıkları kurun

Bu örneği, mevcut bir Vite uygulaması gibi ES modülü paketleyicisi olan bir npm projesinde kullanın. Aşağıdaki sürümler bu sitenin görüntüleyicisiyle eşleşir. Paket adıyla yapılan içe aktarmalar, JavaScript dosyasını doğrudan tarayıcıda açarak çalışmaz.

npm install [email protected] [email protected]

Basis kod dönüştürücü dosyalarını kurulu Three.js paketinden public dizinine kopyalayın. Standart public dizini sitenin kökünden sunuluyorsa aşağıdaki dosyalara /basis/ yolundan erişilir. Bunların KTX2Loader ile aynı Three.js sürümünden geldiğinden emin olun.

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

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

Optimize edilmiş dosyayı public/models/optimized.glb konumuna yerleştirin ve id değeri model olan bir canvas oluşturun. Aşağıdaki kodu uygulamanın giriş modülü olarak kullanın. Kamerayı yüklenen modelin sınırlarına göre ayarlar ve varsa 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

Sıkı Content Security Policy uygulayan sitelerde konsolda engellenen Web Worker veya WebAssembly olup olmadığına bakın. Uygulamanın worker ve WASM sunumunu bilinçli biçimde yapılandırın; yalnızca hatayı gizlemek için politikayı kaldırmayın. Başarılı ağ yanıtı tek başına çözümlemenin başarılı olduğunu göstermez.

Örnek iki çıktı türünü de yükleyebilmek için her iki çözücüyü kurar. PNG veya JPEG dokularını koruyan dosyalarda KTX2Loader gerekmez. WebP için tarayıcı ve yükleyici desteği gerekir ancak Basis kod dönüştürücüsü kullanılmaz. Modelleri sık değiştiren bir uygulamada eski geometriyi, malzemeleri ve dokuları serbest bırakın; artık gerekmediğinde KTX2 yükleyicisini de temizleyin.

Three.js GLTFLoader · Three.js KTX2Loader

Diğer çıktı uyumluluk gereksinimlerini inceleyin →

Motor kaynağı: gltfpack