threejs-loaders

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

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/jay6697117/jet-battle --skill threejs-loaders-jay6697117
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/jay6697117/jet-battle/tree/main/.agents/skills/threejs-loaders
Command: npx skills add https://github.com/jay6697117/jet-battle --skill threejs-loaders-jay6697117

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Loading and coordinating 3D assets in Three.js—GLTF models, textures, HDR environments—can be error-prone and tedious without a structured approach.

Core Features & Use Cases

  • GLTF/GLB loading with GLTFLoader to add models to a scene.
  • Texture loading with TextureLoader for albedo, normal, and environment textures.
  • HDR/EXR environment maps and PMREM generation for accurate lighting and reflections.
  • Async/promise-based loading with error handling and progress tracking.

Quick Start

Start by loading a GLTF model with GLTFLoader and optionally load a texture to verify rendering in 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 models and textures asynchronously in Three.js?▼

To load GLTF models and textures asynchronously in Three.js, use a promise-based API with GLTFLoader and TextureLoader. This approach handles multiple assets concurrently, providing progress tracking and error handling for web-based 3D scenes.

What is the best way to load HDR environment maps for accurate reflections in Three.js?▼

Loading HDR environment maps for accurate reflections in Three.js requires RGBELoader and PMREMGenerator. This combination processes HDR data into pre-filtered mipmap radiance environment maps, enabling accurate lighting and reflections in your 3D scene.

Can I track the loading progress of 3D assets in Three.js?▼

You can track the loading progress of 3D assets in Three.js by utilizing a LoadingManager with promise-based APIs. This setup monitors asynchronous loading stages, providing real-time progress feedback for GLTF models, textures, and HDR environments.

Does Three.js support basic caching and error handling for texture loading?▼

Three.js supports basic caching and error handling for texture loading through structured asynchronous loaders. Using TextureLoader with promise-based APIs ensures failed asset loads are caught and managed without breaking the web-based 3D scene.

Why do I need PMREMGenerator when loading HDR files in Three.js?▼

You need PMREMGenerator when loading HDR files in Three.js to convert high dynamic range images into pre-filtered mipmap radiance environment maps. This process optimizes HDR environment maps for real-time rendering and accurate material reflections.