skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-loaders

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

Updated Aug 12, 2026
Search Tags:#textures#webgl#three.js#hdr#gltf#3d loading#draco
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-loaders-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/threejs-loaders
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-loaders-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Loading 3D assets in Three.js involves many loader classes, compression formats, and async patterns that are easy to get wrong, leading to broken textures, stalled progress bars, and unhandled errors. ## Core Features & Use Cases - Model Loading: Load GLTF/GLB, OBJ, FBX, STL, and PLY models with support for Draco geometry compression and KTX2 compressed textures. - Texture & Environment Loading: Load standard textures, cube maps, and HDR/EXR environments with correct color spaces, PMREM prefiltering, and wrapping configuration. - Progress & Async Management: Coordinate multiple loaders with LoadingManager, promisified loading, caching, retry logic, and error fallbacks. - Use Case: Build a product configurator that loads a Draco-compressed GLB model with a progress bar, applies an HDR environment map for realistic PBR lighting, and gracefully falls back if the primary asset URL fails. ## Quick Start Ask the AI to load a GLB model with a loading progress bar and an HDR environment map in your Three.js scene.

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 scene, and whose animations array can be played with AnimationMixer.

How to load Draco compressed models in Three.js?▼

Create a DRACOLoader, set its decoder path to the Draco decoder files, call preload, then pass it to GLTFLoader via setDRACOLoader. The GLTFLoader then automatically decodes Draco-compressed geometry when loading the model.

How do I show loading progress for multiple Three.js assets?▼

Create a THREE.LoadingManager and pass it to each loader's constructor. The manager's onProgress callback reports loaded and total counts, and onLoad fires when all assets finish, which you can use to update a progress bar.

Does Three.js support HDR environment maps for PBR lighting?▼

Yes, use RGBELoader to load .hdr files or EXRLoader for .exr files, set the texture mapping to EquirectangularReflectionMapping, and assign it to scene.environment. For best PBR results, prefilter with PMREMGenerator's fromEquirectangular method.

Why do my loaded textures look washed out in Three.js?▼

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

How do I handle Three.js asset loading errors and retries?▼

Wrap loader.load in a Promise that rejects on the error callback, then implement retry logic with exponential backoff or a fallback URL. You can also enable THREE.Cache to avoid re-fetching assets that already loaded successfully.

Related Skills

Explore More Software Engineering Skills→
AnthemFlynnAnthemFlynn

asset-pipeline-3d

Optimize GLTF/GLB assets with compression, texture optimization, and LOD workflows.

Community
Advanced
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
gyalamanch001agyalamanch001a

threejs-materials

Configure Three.js mesh materials for PBR shading and shader effects.

Community
Intermediate
JIsaiahJIsaiah
3

r3f-loaders

Manage 3D asset loading with React Three Fiber hooks and Suspense.

Community
Intermediate