skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-loaders

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

1|Updated Aug 17, 2025
Search Tags:#webgl#three.js#3d models#gltf#draco#texture loading#hdr environment
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-loaders-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-loaders
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-loaders-ratnesh-maurya

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, and poor performance. ## 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 environment maps with correct color spaces, wrapping, and PMREM prefiltering for PBR rendering. - Progress & Error Management: Coordinate multiple loaders with LoadingManager, implement promise-based async loading, caching, retries, timeouts, and fallback URLs. - Use Case: When building a product configurator that displays a Draco-compressed GLB model with an HDR environment map and a loading progress bar, use this Skill to wire up GLTFLoader, DRACOLoader, RGBELoader, and LoadingManager correctly. ## Quick Start Ask the AI to load a GLB model with Draco compression and an HDR environment map in your Three.js scene, including a loading progress indicator.

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 receive loaded and total counts for a progress bar, 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 the decoder path to the Draco decoder files, call preload, then pass it to the GLTFLoader with setDRACOLoader before loading the compressed GLB.

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

Load the .hdr file with RGBELoader, set texture.mapping to THREE.EquirectangularReflectionMapping, and assign it to scene.environment and scene.background. For PBR quality, prefilter it with PMREMGenerator's fromEquirectangular method.

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

Washed-out textures usually result from incorrect color space settings. Set texture.colorSpace to THREE.SRGBColorSpace for color and albedo maps, and keep linear color space for data maps like normal and roughness textures.

How do I handle failed model loads in Three.js?▼

Wrap loader.load in a Promise that rejects on the error callback, then use try/catch with async/await. You can add retry logic with exponential backoff, fallback URLs, and fetch with AbortController for timeouts.

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
hanzoaihanzoai

threejs-materials

Guides selection and configuration of Three.js materials for web-based 3D scenes.

Official
Intermediate
JIsaiahJIsaiah
3

r3f-loaders

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

Community
Intermediate