threejs-loaders

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

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-loaders-dogmandcl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/dogmandcl/Claude-Threejs-Skills/tree/main/skills/threejs-loaders
Command: npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-loaders-dogmandcl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aids developers in loading 3D assets in Three.js, including GLTF models, textures, HDR environments, and handling loading progress.

Core Features & Use Cases

  • GLTF/Model loading with GLTFLoader and support for textures via TextureLoader, plus optional DRACOLoader and KTX2 integration for compressed assets.
  • LoadingManager usage to coordinate multiple assets, track progress, and provide early feedback to users.
  • HDR/basis textures and environment maps support (RGBELoader/PMREM) for realistic lighting and reflections.
  • Caching and asset management patterns to reuse loaded resources and optimize performance.

Quick Start

Load a GLTF model into your Three.js scene using GLTFLoader as a starting example.

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?

To load GLTF models and textures in Three.js, use GLTFLoader for models and TextureLoader for textures. This approach supports real-time web scenes and provides optional DRACOLoader and KTX2 pipelines for handling compressed assets efficiently.

What is the best way to track loading progress for multiple 3D assets?

The best way to track loading progress for multiple 3D assets is using Three.js LoadingManager. It coordinates multiple loaders, tracks asset loading progress, and provides early feedback to users during real-time web scene or VR/AR experiences.

How do I use HDR environments for realistic lighting in Three.js?

Use HDR environments in Three.js with RGBELoader and PMREM to generate environment maps. This enables realistic lighting and reflections in your 3D scenes, supporting basis textures for optimized rendering performance.

Does Three.js support DRACOLoader and KTX2 for compressed 3D assets?

Yes, Three.js supports DRACOLoader and KTX2 pipelines for compressed 3D assets. This integration allows developers to load compressed GLTF models and textures efficiently, optimizing performance for web-based 3D applications.

How do I implement caching and error handling for loaded 3D resources?

Implement caching and error handling for loaded 3D resources using Three.js asset management patterns. These patterns reuse loaded resources to optimize performance and include error handling to manage failed asset loads gracefully.

Can I synchronize asset loading for VR/AR experiences in Three.js?

Yes, you can synchronize asset loading for VR/AR experiences in Three.js. Using LoadingManager with GLTFLoader and HDR loaders ensures assets are loaded with progress feedback before rendering real-time web scenes.