cloudai-x/threejs-loaders

threejs-loaders은(는) 무엇을 하나요?

Three.js 자산 로딩 - GLTF, 텍스처, 이미지, 모델, 비동기 패턴. 3D 모델, 텍스처, HDR 환경을 로드하거나 로딩 진행 상황을 관리할 때 사용합니다.

개요

이 스킬은 Three.js에서 3D 자산(모델, 텍스처, 이미지, HDR 환경)을 로드하는 표준 패턴을 제공합니다.

지원 로더

• GLTFLoader: .glb/.gltf 3D 모델 로드
• TextureLoader: 일반 텍스처 이미지 로드
• CubeTextureLoader: 큐브 맵 텍스처 로드
• RGBELoader: HDR 환경 맵 로드 (.hdr)
• FileLoader: 일반 파일(JSON, 바이너리 등) 로드

기본 사용법

GLTF 모델 로드

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load(
  'path/to/model.glb',
  (gltf) => {
    scene.add(gltf.scene);
  },
  (xhr) => {
    console.log(`Loading: ${(xhr.loaded / xhr.total) * 100}%`);
  },
  (error) => {
    console.error('An error happened', error);
  }
);

텍스처 로드

import { TextureLoader } from 'three';

const textureLoader = new TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

HDR 환경 맵 로드

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const rgbeLoader = new RGBELoader();
rgbeLoader.load('path/to/environment.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture;
});

고급: 로딩 진행 관리

LoadingManager를 사용하여 여러 자산 로드의 진행 상황을 중앙에서 관리할 수 있습니다.

import { LoadingManager } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const manager = new LoadingManager();
const gltfLoader = new GLTFLoader(manager);

manager.onStart = (url, itemsLoaded, itemsTotal) => {
  console.log(`Started loading file: ${url}.`);
};
manager.onProgress = (url, itemsLoaded, itemsTotal) => {
  console.log(`Loading file: ${url}. Loaded ${itemsLoaded} of ${itemsTotal} files.`);
};
manager.onLoad = () => {
  console.log('All files loaded.');
};
manager.onError = (url) => {
  console.log(`Error loading ${url}.`);
};

gltfLoader.load('model1.glb', (gltf) => { scene.add(gltf.scene); });
gltfLoader.load('model2.glb', (gltf) => { scene.add(gltf.scene); });

환경 변수

없음

참고

• 모든 로더는 비동기적으로 동작합니다.
• 오류 처리를 항상 포함해야 합니다 (onError 콜백 또는 try/catch).
• 성능을 위해 로드된 자산은 재사용하는 것이 좋습니다.