threejs-loaders

Load GLTF/GLB models, KTX2 textures, and HDR environments into Three.js scenes.

46.2k|5.7k|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill threejs-loaders-calesthio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/threejs-loaders
Command: npx skills add https://github.com/calesthio/OpenMontage --skill threejs-loaders-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the complexity of loading, configuring, and managing 3D assets and textures in Three.js applications so you can reliably import models, environments, and textures without breaking rendering or interactivity.

Core Features & Use Cases

  • Unified loading patterns: Examples and patterns for GLTF/GLB, OBJ/MTL, FBX, STL, and PLY formats with progress tracking.
  • Texture and environment handling: Guidance for TextureLoader, CubeTextureLoader, HDR/EXR loading, PMREM generation, and color space configuration for accurate PBR rendering.
  • Compression and optimization: Integration examples for DRACO and KTX2, caching strategies, blob/ArrayBuffer sources, and promise-based async loading with retry/fallback patterns for robust web delivery.
  • Use Case: Integrate a remote GLTF character with KTX2 textures and an HDR environment into a scene, show a progress UI while assets stream, and enable animations and shadows once loading completes.

Quick Start

Load a GLTF model with appropriate DRACO or KTX2 decoders, generate a PMREM environment from an HDR, and play any model animations once all assets report complete.

Frequently Asked Questions about threejs-loaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load a GLTF model with DRACO compression and KTX2 textures in Three.js?

To load a GLTF model with DRACO and KTX2 in Three.js, configure the appropriate decoders for compressed geometry and textures, then use promise-based async loading to import the assets into your scene.

What is the best way to handle HDR environment loading and PMREM generation in Three.js?

Handling HDR environment loading in Three.js involves importing the HDR file and generating a PMREM environment map to ensure accurate PBR rendering across your scene's materials.

Can I use LoadingManager progress callbacks for Three.js asset loading?

Yes, you can use LoadingManager progress callbacks during Three.js asset loading to track streaming assets and trigger UI updates or enable animations once all models and textures report complete.

Does Three.js support promise-based loading with retry and fallback for 3D assets?

Three.js supports promise-based loading with retry and fallback patterns through coordinated async logic, ensuring robust web delivery when streaming remote 3D models, environments, and textures.

How do I configure color space for PBR rendering when loading textures in Three.js?

To configure color space for PBR rendering in Three.js, apply the correct color space settings during texture loading to ensure HDR, EXR, and standard textures render accurately.

Why do my Three.js animations not play after loading a remote GLTF model?

Three.js animations may not play if triggered before assets report complete; use LoadingManager callbacks to ensure model loading, texture decoding, and environment generation finish before starting animations.