threejs-loaders

name	threejs-loaders
description	Three.js asset loading — GLTFLoader with DRACO/KTX2/Meshopt compression, OBJLoader+MTLLoader, FBXLoader, STLLoader, PLYLoader, RGBELoader for HDR, LoadingManager with progress/error tracking, async/Promise patterns, asset caching, and error handling. Use when loading 3D models, HDR environments, or managing multi-asset loading pipelines. Adapted from CloudAI-X/threejs-skills (MIT).
license	MIT
compatibility	Portable reference skill for agents that support markdown skills or prompt files. Works best alongside project Three.js source files and asset pipeline configuration.
disable-model-invocation	true
metadata	{"owner":"game-delivery","version":"2.0.0","language":"en-GB","category":"web-rendering","upstream_references":["https://github.com/CloudAI-X/threejs-skills (MIT — see NOTICE.md)"],"tags":["three-js","loaders","gltf","glb","draco","ktx2","fbx","obj","hdr","loading-manager","async","asset-pipeline"],"intents":["model-loading","compression-setup","hdr-loading","load-progress-tracking","asset-caching","error-handling"],"output_types":["code-example","api-reference","loading-pipeline-plan"]}

Three.js Loaders

Quick Start

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load(
  'model.glb',
  gltf => {
    scene.add(gltf.scene);
  },
  xhr => console.log(`${(xhr.loaded / xhr.total * 100).toFixed(0)}% loaded`),
  err => console.error('Load error:', err),
);

---

LoadingManager

Tracks progress across multiple loaders simultaneously.

const manager = new THREE.LoadingManager();

manager.onStart    = (url, loaded, total) => console.log(`Loading started: ${url}`);
manager.onLoad     = ()                   => console.log('All assets loaded');
manager. =  {
   pct = .(loaded / total * );
  (pct);
};
manager.    =  .();


 gltfLoader    =  (manager);
 textureLoader =  .(manager);
 audioLoader   =  .(manager);