threejs-loaders

Load GLTF/GLB models, textures, and environment maps in Three.js.

Updated May 31, 2026
One-click install
npx skills add https://github.com/fanguyun/SkillManager --skill threejs-loaders-fanguyun
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/fanguyun/SkillManager/tree/main/threejs-loaders
Command: npx skills add https://github.com/fanguyun/SkillManager --skill threejs-loaders-fanguyun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, three/addons/loaders/GLTFLoader.js, three/addons/loaders/TextureLoader.js, three/addons/loaders/CubeTextureLoader.js, three/addons/loaders/RGBELoader.js, three/addons/loaders/EXRLoader.js, three/addons/loaders/PMREMGenerator.js, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of loading and managing 3D assets in Three.js, providing a robust solution for integrating and manipulating 3D models, textures, and environments.

Core Features & Use Cases

  • GLTF/GLB Loading: Support for the most common 3D format for web.
  • Texture Loading: Handles various texture formats, including HDR/EXR and cube textures.
  • Async/Promise Loading: Enables non-blocking asset loading.
  • Caching: Implements built-in and custom caching for performance optimization.
  • Error Handling: Offers fallback, retry, and timeout mechanisms.
  • Performance Tips: Provides guidelines for efficient asset loading.
  • Use Case: Ideal for developers and designers looking to enhance their Three.js projects with advanced 3D asset management capabilities.

Quick Start

Load a GLTF model with the threejs-loaders skill: loadModel("model.glb")

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 asynchronously in Three.js without blocking the main thread?

Asynchronous GLTF loading in Three.js uses non-blocking Promise-based mechanisms to prevent main thread freezing. It supports built-in caching for performance optimization and provides robust error handling with fallback and retry mechanisms.

Can I load HDR or EXR environment maps for Three.js scenes?

Yes, loading HDR or EXR environment maps in Three.js is fully supported. It handles various texture formats using RGBELoader and EXRLoader, alongside CubeTextureLoader, to integrate complex environment maps into your scenes.

What is the best way to handle texture loading errors and timeouts in Three.js?

Handling texture loading errors and timeouts in Three.js involves implementing robust error handling with fallback, retry, and timeout mechanisms. This ensures reliable asset loading and management even under poor network conditions.

Does Three.js support caching for 3D assets to optimize web performance?

Three.js supports caching for 3D assets to optimize web performance by implementing built-in and custom caching strategies. This significantly improves loading efficiency in complex scenes with diverse asset requirements.

How do I use PMREMGenerator with loaded environment maps in Three.js?

Using PMREMGenerator with loaded environment maps in Three.js involves processing HDR or EXR textures for prefiltered rendering. The system integrates PMREMGenerator alongside RGBELoader and EXRLoader to produce optimized environment maps.