threejs-loaders

Load GLTF models, textures, and HDR environments in Three.js applications.

2|10|Updated Jul 28, 2026
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-loaders-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-loaders
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-loaders-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Loading 3D assets in Three.js involves many loader classes, async patterns, compression formats, and configuration details that are easy to get wrong, leading to broken textures, failed model loads, or untracked loading progress. ## Core Features & Use Cases - Model Loading: Load GLTF/GLB, OBJ, FBX, STL, and PLY models, including Draco-compressed geometry and KTX2 textures. - Texture & Environment Loading: Configure TextureLoader, CubeTextureLoader, RGBELoader, EXRLoader, and PMREMGenerator for color maps and PBR environment lighting. - Progress & Error Handling: Coordinate multiple loaders with LoadingManager, promisify loaders for async/await, and implement retry, timeout, and fallback logic. - Use Case: You are building a web-based 3D product viewer and need to load a Draco-compressed GLB model with an HDR environment map while showing a progress bar and handling network failures gracefully. ## Quick Start Ask the AI to write Three.js code that loads a GLB model with a loading progress bar and an HDR environment map.

Frequently Asked Questions about threejs-loaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a GLTF or GLB model in Three.js?▼

Use GLTFLoader from three/addons/loaders/GLTFLoader.js and call loader.load with the model URL and a callback. The callback receives a gltf object whose scene property you add to your Three.js scene, and whose animations array can be played with AnimationMixer.

How to track loading progress for multiple Three.js assets?▼

Create a THREE.LoadingManager and pass it to each loader's constructor. Set manager.onProgress to update a progress bar with loaded/total counts, and manager.onLoad to detect when all assets finish loading.

Does GLTFLoader support Draco compressed models?▼

Yes, GLTFLoader supports Draco compression through DRACOLoader. Create a DRACOLoader, set its decoder path to the Draco decoder files, call preload, then attach it with gltfLoader.setDRACOLoader before loading the compressed GLB.

How do I load an HDR environment map in Three.js?▼

Use RGBELoader to load .hdr files or EXRLoader for .exr files, then set texture.mapping to THREE.EquirectangularReflectionMapping. For PBR rendering, pass the texture through PMREMGenerator.fromEquirectangular before assigning it to scene.environment.

Why does my loaded texture look washed out in Three.js?▼

The texture color space is likely wrong. Set tex.colorSpace to THREE.SRGBColorSpace for color and albedo maps, and use linear color space for data maps like normal or roughness textures, then set tex.needsUpdate to true.

Can I use async/await with Three.js loaders?▼

Yes, wrap loader.load in a Promise that resolves in the onLoad callback and rejects in onError. You can then await individual loads or use Promise.all to load multiple models and textures concurrently.