Skip to main content الرئيسية المنشئون afovea game-dev-skills threejs-loaders
threejs-loaders 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).
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/afovea/game-dev-skills --skill threejs-loadersيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Art Director persona for visual style, pillars, art bible, cross-discipline visual consistency, art critique, and art QA. Use when a task needs visual direction, style enforcement, or cohesion across concept, environment, character, VFX, and lighting.
Audio Director persona for sound design, music direction, mix, audio implementation patterns, and audio pipeline. Use when a task needs reasoning about audio intent, audio-mechanic integration, mix balance, or the audio toolchain.
Post-pipeline cleanup and verification pass for game-development work. Regenerate / re-bake any derived content, rebuild the project, verify the editor / engine opens cleanly, run automated test suites, take a perf snapshot against budgets, and confirm save / network / cert / pipeline surfaces are untouched (or correctly versioned) against the pre-run baseline.
المهن ذات الصلة SOC
استنادا إلى تصنيف SOC المهني
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 =>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.onProgress
(url, loaded, total ) =>
const
Math
round
100
updateProgressBar
onError
url =>
console
error
`Failed: ${url} `
const
new
GLTFLoader
const
new
THREE
TextureLoader
const
new
THREE
AudioLoader
GLTFLoader — Primary Format .glb (binary) is the preferred production format — single file, faster load.
Basic Usage import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' ;
const loader = new GLTFLoader ();
loader.load ('model.glb' , gltf =>const model = gltf.scene ;
model.traverse (child =>if (child.isMesh ) {
child.castShadow = true ;
child.receiveShadow = true ;
}
});
scene.add (model);
if (gltf.animations .length > 0 ) {
const mixer = new THREE .AnimationMixer (model);
const action = mixer.clipAction (gltf.animations [0 ]);
action.play ();
}
});
Async/Await Pattern function loadGLTF (url ) {
return new Promise ((resolve, reject ) => {
new GLTFLoader ().load (url, resolve, undefined , reject);
});
}
async function init (const [character, environment] = await Promise .all ([
loadGLTF ('character.glb' ),
loadGLTF ('environment.glb' ),
]);
scene.add (character.scene );
scene.add (environment.scene );
}
init ().catch (console .error );
DRACO Compression Reduces geometry file size by 60–90%. Requires the Draco decoder wasm files.
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' ;
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js' ;
const dracoLoader = new DRACOLoader ();
dracoLoader.setDecoderPath ('/libs/draco/' );
const loader = new GLTFLoader ();
loader.setDRACOLoader (dracoLoader);
loader.load ('compressed-model.glb' , gltf =>add (gltf.scene );
dracoLoader.dispose ();
});
Copy decoder files from three/addons/libs/draco/ to your public directory.
KTX2 Texture Compression (Basis Universal) Compressed textures in GLTF — reduces VRAM by 4–8×.
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' ;
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js' ;
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js' ;
const ktx2Loader = new KTX2Loader ();
ktx2Loader.setTranscoderPath ('/libs/basis/' );
ktx2Loader.detectSupport (renderer);
const loader = new GLTFLoader ();
loader.setKTX2Loader (ktx2Loader);
loader.setMeshoptDecoder (MeshoptDecoder );
loader.load ('model-ktx2.glb' , gltf =>add (gltf.scene );
});
GLTF Data Access loader.load ('model.glb' , gltf =>console .log (gltf.scene );
console .log (gltf.scenes );
console .log (gltf.animations );
console .log (gltf.cameras );
const player = gltf.scene .getObjectByName ('Player' );
gltf.scene .traverse (child =>if (child.isMesh ) {
console .log (child.material .name );
}
});
});
OBJLoader + MTLLoader import { OBJLoader } from 'three/addons/loaders/OBJLoader.js' ;
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js' ;
const mtlLoader = new MTLLoader ();
mtlLoader.setPath ('/assets/models/' );
mtlLoader.load ('model.mtl' , materials =>preload ();
const objLoader = new OBJLoader ();
objLoader.setMaterials (materials);
objLoader.setPath ('/assets/models/' );
objLoader.load ('model.obj' , object =>add (object);
});
});
Prefer GLTF over OBJ for new assets — GLTF supports PBR materials, animations, and compression.
FBXLoader import { FBXLoader } from 'three/addons/loaders/FBXLoader.js' ;
const loader = new FBXLoader ();
loader.load ('character.fbx' , object =>scale .setScalar (0.01 );
if (object.animations .length > 0 ) {
const mixer = new THREE .AnimationMixer (object);
mixer.clipAction (object.animations [0 ]).play ();
}
scene.add (object);
});
FBX does not support compressed textures. Use GLTF for production when possible.
STLLoader ASCII and binary STL support. Produces geometry only — no materials.
import { STLLoader } from 'three/addons/loaders/STLLoader.js' ;
const loader = new STLLoader ();
loader.load ('part.stl' , geometry =>computeVertexNormals ();
const mesh = new THREE .Mesh (
geometry,
new THREE .MeshStandardMaterial ({ color : 0xaaaaaa }),
);
scene.add (mesh);
});
PLYLoader Point clouds and mesh data with per-vertex colour.
import { PLYLoader } from 'three/addons/loaders/PLYLoader.js' ;
const loader = new PLYLoader ();
loader.load ('scan.ply' , geometry =>computeVertexNormals ();
const mesh = new THREE .Mesh (
geometry,
new THREE .MeshStandardMaterial ({ vertexColors : true }),
);
const points = new THREE .Points (
geometry,
new THREE .PointsMaterial ({ size : 0.01 , vertexColors : true }),
);
scene.add (mesh);
});
RGBELoader — HDR Environment Maps import { RGBELoader } from 'three/addons/loaders/RGBELoader.js' ;
import { PMREMGenerator } from 'three' ;
const pmremGenerator = new PMREMGenerator (renderer);
pmremGenerator.compileEquirectangularShader ();
new RGBELoader ().load ('studio.hdr' , texture =>const envMap = pmremGenerator.fromEquirectangular (texture).texture ;
scene.environment = envMap;
scene.background = envMap;
texture.dispose ();
pmremGenerator.dispose ();
});
Asset Caching Prevent duplicate network requests for shared assets.
const cache = new Map ();
async function loadGLTFCached (url ) {
if (cache.has (url)) return cache.get (url);
const promise = new Promise ((resolve, reject ) => {
new GLTFLoader ().load (url, resolve, undefined , reject);
});
cache.set (url, promise);
return promise;
}
const [hero, enemy] = await Promise .all ([
loadGLTFCached ('hero.glb' ),
loadGLTFCached ('enemy.glb' ),
]);
async function spawnCharacter (url, position ) {
const gltf = await loadGLTFCached (url);
const clone = gltf.scene .clone (true );
clone.position .copy (position);
scene.add (clone);
return clone;
}
Error Handling async function loadWithRetry (url, retries = 3 ) {
for (let attempt = 0 ; attempt < retries; attempt++) {
try {
return await loadGLTF (url);
} catch (err) {
if (attempt === retries - 1 ) throw err;
console .warn (`Retry ${attempt + 1 } for ${url} ` );
await new Promise (r =>setTimeout (r, 1000 * (attempt + 1 )));
}
}
}
async function loadOrFallback (url ) {
try {
return await loadGLTF (url);
} catch {
console .warn (`Failed to load ${url} — using placeholder` );
return createPlaceholderMesh ();
}
}
function createPlaceholderMesh (const geo = new THREE .BoxGeometry (1 , 1 , 1 );
const mat = new THREE .MeshStandardMaterial ({ color : 0xff00ff , wireframe : true });
return { scene : new THREE .Mesh (geo, mat), animations : [] };
}
Preloading All Assets Before Play const assetManifest = [
{ type : 'gltf' , url : 'character.glb' },
{ type : 'gltf' , url : 'environment.glb' },
{ type : 'texture' , url : 'ui-atlas.png' },
{ type : 'hdr' , url : 'sky.hdr' },
];
async function preloadAll (manifest, onProgress ) {
const results = {};
let loaded = 0 ;
await Promise .all (manifest.map (async ({ type, url }) => {
if (type === 'gltf' ) results[url] = await loadGLTF (url);
if (type === 'texture' ) results[url] = await loadTexture (url);
if (type === 'hdr' ) results[url] = await loadHDR (url);
loaded++;
onProgress (loaded / manifest.length );
}));
return results;
}
const assets = await preloadAll (assetManifest, pct =>style .width = `${pct * 100 } %` ;
});
Performance Tips
Use .glb over .gltf — single binary file, no separate texture requestsDRACO-compress geometry — 60–90% size reduction, CPU cost only on first loadKTX2-compress textures — 4–8× VRAM reduction vs PNG/JPGCache loader instances — create one GLTFLoader per loader type, not per load callUse LoadingManager — track all assets together, show a real progress barClone, don't re-load — for multiple instances of the same model, gltf.scene.clone(true)
const gltfLoader = new GLTFLoader ();
loader.load ('a.glb' , ...);
loader.load ('b.glb' , ...);
loader.load ('c.glb' , ...);
See Also
threejs-animation — using gltf.animations with AnimationMixerthreejs-textures — texture loading and colour space configurationthreejs-lighting — RGBELoader for HDR environment mapsthree-js-best-practices — asset compression pipeline rules 