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.