threejs-loaders

Load GLTF models, textures, and HDR environments in Three.js with progress tracking.

2|1|Updated Mar 26, 2026
One-click install
npx skills add https://github.com/huangzida/skills --skill threejs-loaders-huangzida
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/huangzida/skills/tree/main/threejs-loaders
Command: npx skills add https://github.com/huangzida/skills --skill threejs-loaders-huangzida

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js projects often struggle with reliably loading multiple assets (GLTF models, textures, HDR environments) and tracking load progress. This skill provides a unified loading workflow that coordinates different loaders, supports advanced formats like DRACOLoader and KTX2, and offers progress tracking and error handling.

Core Features & Use Cases

  • Unified loading for GLTF, textures, HDR environments, and other assets in Three.js.
  • Supports advanced loaders (DRACOLoader, KTX2Loader) and promise-based loading with LoadingManager.
  • Use cases include initializing scenes, streaming assets, and monitoring load progress with robust error handling.

Quick Start

Create a Three.js scene and load assets with GLTFLoader or TextureLoader, optionally wiring a LoadingManager to monitor progress.

Frequently Asked Questions about threejs-loaders

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

FAQPage Schema
How do I load GLTF models and textures in Three.js with progress tracking?

To load GLTF models and textures in Three.js with progress tracking, you can use a unified promise-based loading workflow wired to a LoadingManager, which coordinates multiple loaders and monitors load progress robustly.

What's the best way to handle DRACO compressed GLTF files in Three.js?

Handling DRACO compressed GLTF files in Three.js is best achieved by using a loader workflow that integrates DRACOLoader natively, enabling efficient decompression and loading of advanced compressed 3D model assets.

Can I use a promise-based API to load HDR environments in Three.js?

Yes, you can use a promise-based API to load HDR environments in Three.js, allowing asynchronous fetching of environment maps while coordinating with other loaders and centralizing error handling.

Why does loading multiple Three.js assets fail without a LoadingManager?

Loading multiple Three.js assets often fails or loses progress tracking without a LoadingManager because individual loaders operate independently, whereas a unified manager coordinates events, errors, and completion across all assets.

Do I need KTX2Loader to load compressed textures in Three.js?

You need KTX2Loader in Three.js when loading KTX2 compressed textures, as it decodes these specialized GPU-friendly formats efficiently, integrating directly into the promise-based asset loading pipeline.

How to manage Three.js asset loading errors across GLTF and HDR files?

To manage Three.js asset loading errors across GLTF and HDR files, implement a unified loading workflow with a LoadingManager that provides centralized, robust error handling and tracks overall progress.