threejs-loaders は何をしますか？
Three.jsアセット読み込み - GLTF、テクスチャ、画像、モデル、非同期パターン。3Dモデル、テクスチャ、HDR環境の読み込みや、読み込み進捗の管理に使用します。
使用方法
以下のサンプルコードを参照して、アセットを読み込んでください。
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { TextureLoader } from 'three';
import { HDRLoader } from '...';
const loader = new GLTFLoader();
loader.load(
'path/to/model.gltf',
(gltf) => {
scene.add(gltf.scene);
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
(error) => {
console.error('An error happened', error);
}
);
const textureLoader = new TextureLoader();
textureLoader.load(
'path/to/texture.jpg',
(texture) => {
material.map = texture;
material.needsUpdate = true;
}
);
サポートされるアセットタイプ
- GLTFモデル（.gltf, .glb）
- テクスチャ画像（.jpg, .png, .webp）
- HDR環境マップ（.hdr, .exr）
非同期パターン
async/await を使用して、アセット読み込みを簡略化できます。
async function loadModel(url) {
const loader = new GLTFLoader();
return new Promise((resolve, reject) => {
loader.load(url, resolve, undefined, reject);
});
}
const gltf = await loadModel('path/to/model.gltf');