threejs-loaders

Coordinate WebGL asset loading with support for GLTF, HDR, and PMREM.

2|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-loaders-elementtech
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-loaders
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-loaders-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide clear patterns and best practices for loading and managing 3D assets in Three.js projects so developers avoid common pitfalls with formats, performance, and loading lifecycle management.

Core Features & Use Cases

  • Coordinate multiple loaders and present loading progress using LoadingManager for scenes that require many assets.
  • Support common model and texture formats including GLTF/GLB, OBJ/MTL, FBX, STL, PLY, HDR/EXR environments, and compressed workflows with DRACO and KTX2.
  • Show how to generate PMREM for PBR environments, cache assets, promisify loaders for async/await workflows, and implement retries, fallbacks, and blob/arrayBuffer loading for resilient delivery.

Quick Start

Load a GLB model, apply an HDR environment via PMREM, and show a progress bar while coordinating assets with LoadingManager.

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 with Draco and KTX2 compression in Three.js?

Loading GLTF models with Draco and KTX2 in Three.js requires configuring the respective decoder libraries and passing them to the GLTFLoader to handle compressed geometry and textures during the asynchronous parsing process.

What is the best way to show a loading progress bar for multiple 3D assets in Three.js?

The best way to show a loading progress bar for multiple 3D assets in Three.js is using the LoadingManager to coordinate loaders, which reports overall download progress and triggers callbacks when all assets finish loading.

How do I apply an HDR environment map to a scene using PMREM in Three.js?

Applying an HDR environment map using PMREM in Three.js involves loading the HDR file and passing it to the PMREMGenerator to create a cubemap, which is then set as the scene environment for accurate PBR lighting reflections.

Can I use async await with Three.js loaders for sequential asset loading?

Yes, you can use async await with Three.js loaders by promisifying the loader load methods, wrapping callbacks in Promises to enable sequential execution, error handling, and retry fallback strategies for resilient delivery.

Why does my Three.js texture loading fail on large files and how can I cache them?

Three.js texture loading can fail on large files due to network timeouts or memory limits, which can be mitigated by implementing cache management, blob loading, and arrayBuffer loading strategies to handle resilient asset delivery.

Does Three.js LoadingManager support fallback strategies for failed 3D model downloads?

Yes, Three.js LoadingManager can support fallback strategies for failed 3D model downloads by integrating error handling and retry logic within the promisified loader workflows to ensure resilient asset delivery.