threejs-loaders

Load GLTF, GLB, textures, HDR, and EXR assets in Three.js.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-loaders-norrbacka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/norrbacka/threejs_codex_base/tree/main/.codex/skills/threejs-loaders
Command: npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-loaders-norrbacka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the complexity of loading 3D assets in Three.js by giving you a reliable way to import models, textures, and environment maps without fragile one-off code.

Core Features & Use Cases

  • Model Loading: Import GLTF and GLB scenes, animations, and cameras for games, prototypes, and interactive demos.
  • Asset Pipeline Support: Configure loaders for textures, HDR, EXR, Draco, KTX2, OBJ, FBX, STL, and PLY content.
  • Robust Runtime Flows: Handle progress reporting, async loading, fallbacks, caching, and cleanup for production-ready asset delivery.
  • Use Case: Bring a compressed character model, HDR environment, and supporting textures into a Three.js scene with progress feedback and graceful error handling.

Quick Start

Use the threejs-loaders skill to load a GLB model, wire in the needed loaders, and add progress, fallback, and caching behavior for your 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 GLTF and GLB models in Three.js with progress tracking?

To load GLTF and GLB models in Three.js with progress tracking, you configure the loaders to handle async asset delivery, report download progress, and execute fallbacks or cleanup for robust runtime imports.

How do you handle async errors and caching when loading Three.js assets?

Handling async errors and caching when loading Three.js assets requires configuring loaders with error handling routines and storing imported resources, preventing fragile one-off pipelines and ensuring robust runtime flows.

Does Three.js support loading HDR and EXR environment maps for interactive 3D?

Three.js supports loading HDR and EXR environment maps by configuring the appropriate loaders, preparing the environment map data for runtime import, and integrating it into your interactive 3D scene pipeline.

What is the best way to import compressed meshes like Draco and KTX2 in Three.js?

The best way to import compressed meshes like Draco and KTX2 in Three.js is to configure dedicated asset pipeline loaders, enabling you to bring compressed character models and supporting textures into your scene reliably.

Can I load multiple 3D assets simultaneously in a Three.js scene?

You can load multiple 3D assets simultaneously in a Three.js scene by configuring multi-asset workflows, which manage async loading, progress reporting, and caching for production-ready asset delivery without brittle ad hoc pipelines.

Why does my Three.js asset pipeline break when importing OBJ and FBX files?

Your Three.js asset pipeline breaks when importing OBJ and FBX files due to fragile one-off code, which you can resolve by implementing robust loader configuration, async error handling, and fallback behavior.