threejs-syntax-loaders

Use when loading 3D models (GLTF, FBX, OBJ), textures, or HDR environment maps in Three.js. Prevents the common mistake of not setting up DRACOLoader, wrong WASM path, or missing error handling. Covers GLTFLoader, DRACOLoader, KTX2Loader, TextureLoader, RGBELoader, FBXLoader, OBJLoader, LoadingManager. Keywords: GLTFLoader, GLTF, GLB, load model, DRACOLoader, texture, FBXLoader, OBJLoader, RGBELoader, HDR, LoadingManager, progress, export, GLTFExporter, save model, download 3D, import 3D file.

설치로 이동

저장소: Impertio-Studio/Three.js-Claude-Skill-Package
최근 소스 활동: 2026년 3월 30일 18:30
감지된 SKILL.md 언어: 영어
스타: 11
포크: 0

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/Impertio-Studio/Three.js-Claude-Skill-Package --skill threejs-syntax-loaders

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

5 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

검색으로 돌아가기 설치로 돌아가기

Loader	Import
`TextureLoader`	`import { TextureLoader } from 'three';`
`CubeTextureLoader`	`import { CubeTextureLoader } from 'three';`
`GLTFLoader`	`import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';`
`DRACOLoader`	`import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';`
`KTX2Loader`	`import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';`
`FBXLoader`	`import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';`
`OBJLoader`	`import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';`
`MTLLoader`	`import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';`
`RGBELoader`	`import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';`
`MeshoptDecoder`	`import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';`

Method	Signature	Purpose
`load`	`(url, onLoad, onProgress, onError)`	Callback-based loading
`loadAsync`	`(url, onProgress) => Promise`	Promise-based loading
`setPath`	`(path: string)`	Set base URL prefix for all loads
`setResourcePath`	`(path: string)`	Set resource resolution path
`setCrossOrigin`	`(value: string)`	Set CORS mode
`setWithCredentials`	`(value: boolean)`	Enable credentials for cross-origin
`setRequestHeader`	`(header: object)`	Set custom HTTP headers

import * as THREE from 'three';

const manager = new THREE.LoadingManager(
  () => { console.log('All assets loaded'); },
  (url, loaded, total) => { console.log(`Progress: ${loaded}/${total}`); },
  (url) => { console.error(`Failed to load: ${url}`); }
);

// Pass manager to any loader
const textureLoader = new THREE.TextureLoader(manager);
const gltfLoader = new GLTFLoader(manager);

Method	Purpose
`itemStart(url)`	Manually register a loading item
`itemEnd(url)`	Manually mark item as loaded
`itemError(url)`	Manually mark item as failed
`resolveURL(url)`	Resolve URL through modifiers
`setURLModifier(callback)`	Custom URL rewriting (blob URLs, service workers)

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('/basis/');
ktx2Loader.detectSupport(renderer); // MUST pass renderer instance

gltfLoader.setKTX2Loader(ktx2Loader);

import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

await MeshoptDecoder.ready;
gltfLoader.setMeshoptDecoder(MeshoptDecoder);

try {
  const gltf = await gltfLoader.loadAsync('model.glb');
  scene.add(gltf.scene);
} catch (error) {
  console.error('Failed to load model:', error);
}

{
  scene: THREE.Group,                    // Root scene node -- add this to your scene
  scenes: THREE.Group[],                 // All scenes in the file
  cameras: THREE.Camera[],              // Embedded cameras
  animations: THREE.AnimationClip[],    // Animation data for AnimationMixer
  asset: { generator: string, version: string },  // File metadata
  parser: GLTFParser,                    // Internal parser (advanced use)
  userData: {}                           // Custom glTF extensions
}

Method	Signature	Purpose
`load`	`(url, onLoad, onProgress, onError)`	Load with callbacks
`loadAsync`	`(url, onProgress) => Promise<GLTF>`	Load with Promise
`parse`	`(data, path, onLoad, onError)`	Parse ArrayBuffer or JSON directly
`setDRACOLoader`	`(dracoLoader: DRACOLoader)`	Enable Draco decompression
`setKTX2Loader`	`(ktx2Loader: KTX2Loader)`	Enable KTX2 texture decompression
`setMeshoptDecoder`	`(decoder)`	Enable meshopt decompression
`register`	`(plugin)`	Register a glTF extension plugin
`unregister`	`(plugin)`	Unregister a glTF extension plugin

Method	Signature	Purpose
`setDecoderPath`	`(path: string)`	Path to directory containing WASM decoders
`setDecoderConfig`	`(config: object)`	`{ type: 'js' \| 'wasm' }` -- WASM is default and faster
`preload`	`()`	Pre-fetch decoder WASM before first use
`dispose`	`()`	Free WASM decoder memory

const loader = new THREE.TextureLoader();
const texture = await loader.loadAsync('diffuse.jpg');
texture.colorSpace = THREE.SRGBColorSpace; // ALWAYS for color textures
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
material.map = texture;

const cubeLoader = new THREE.CubeTextureLoader();
cubeLoader.setPath('/textures/cube/');
const cubeTexture = cubeLoader.load([
  'px.jpg', 'nx.jpg',  // positive-x, negative-x
  'py.jpg', 'ny.jpg',  // positive-y, negative-y
  'pz.jpg', 'nz.jpg'   // positive-z, negative-z
]);
scene.background = cubeTexture;
scene.environment = cubeTexture;

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

const rgbeLoader = new RGBELoader();
rgbeLoader.load('environment.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.environment = texture; // PBR environment lighting
  scene.background = texture;  // Optional: visible HDR background
});

import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

const fbxLoader = new FBXLoader();
const model = await fbxLoader.loadAsync('character.fbx');
scene.add(model);

import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';

const mtlLoader = new MTLLoader();
const materials = await mtlLoader.loadAsync('model.mtl');
materials.preload();

const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
const model = await objLoader.loadAsync('model.obj');
scene.add(model);

function disposeModel(model) {
  model.traverse((child) => {
    if (child.isMesh) {
      child.geometry.dispose();
      if (Array.isArray(child.material)) {
        child.material.forEach((mat) => {
          disposeMaterial(mat);
        });
      } else {
        disposeMaterial(child.material);
      }
    }
  });
  model.removeFromParent();
}

function disposeMaterial(material) {
  for (const key of Object.keys(material)) {
    const value = material[key];
    if (value && typeof value === 'object' && 'dispose' in value) {
      value.dispose(); // Disposes textures
    }
  }
  material.dispose();
}

name	threejs-syntax-loaders
description	Use when loading 3D models (GLTF, FBX, OBJ), textures, or HDR environment maps in Three.js. Prevents the common mistake of not setting up DRACOLoader, wrong WASM path, or missing error handling. Covers GLTFLoader, DRACOLoader, KTX2Loader, TextureLoader, RGBELoader, FBXLoader, OBJLoader, LoadingManager. Keywords: GLTFLoader, GLTF, GLB, load model, DRACOLoader, texture, FBXLoader, OBJLoader, RGBELoader, HDR, LoadingManager, progress, export, GLTFExporter, save model, download 3D, import 3D file.
license	MIT
compatibility	Designed for Claude Code. Requires Three.js r160+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

name	threejs-syntax-loaders
description	Use when loading 3D models (GLTF, FBX, OBJ), textures, or HDR environment maps in Three.js. Prevents the common mistake of not setting up DRACOLoader, wrong WASM path, or missing error handling. Covers GLTFLoader, DRACOLoader, KTX2Loader, TextureLoader, RGBELoader, FBXLoader, OBJLoader, LoadingManager. Keywords: GLTFLoader, GLTF, GLB, load model, DRACOLoader, texture, FBXLoader, OBJLoader, RGBELoader, HDR, LoadingManager, progress, export, GLTFExporter, save model, download 3D, import 3D file.
license	MIT
compatibility	Designed for Claude Code. Requires Three.js r160+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Callback	Signature	When
`onStart`	`(url, itemsLoaded, itemsTotal)`	First item begins loading
`onLoad`	`()`	All items finished
`onProgress`	`(url, itemsLoaded, itemsTotal)`	Each item completes
`onError`	`(url)`	An item fails

threejs-syntax-loaders

설치 방법

소스 파일 검토