threejs-loaders

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

Updated Apr 9, 2026
One-click install
npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-loaders-carlosq96
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/CarlosQ96/robot-crawler/tree/main/.agents/skills/threejs-loaders
Command: npx skills add https://github.com/CarlosQ96/robot-crawler --skill threejs-loaders-carlosq96

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js developers often struggle with loading various 3D assets efficiently, handling progress, and managing different formats like GLTF, HDR, and compressed textures.

Core Features & Use Cases

  • LoadingManager: Coordinates multiple loaders, tracks progress, and provides callbacks for start, load, progress, and error events.
  • Support for Common Formats: GLTF/GLB, OBJ/MTL, FBX, STL, PLY, HDR/EXR, CubeTexture, and compressed Draco and KTX2 assets.
  • Caching & Asset Management: Built‑in THREE.Cache, custom AssetManager class, and error‑handling utilities for robust production pipelines.
  • Use Cases: Interactive games, architectural visualizations, product configurators, or any web application that needs to load 3D models and textures smoothly.

Quick Start

Use the threejs-loaders skill to load a GLTF model named 'example.glb' into your Three.js 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 into a Three.js scene?▼

To load GLTF models and textures into a Three.js scene, use a promise-based asynchronous loader that supports GLTF/GLB formats. This approach manages asset loading and provides built-in error handling for robust integration.

Does Three.js support loading compressed 3D assets like Draco and KTX2?▼

Yes, Three.js supports loading compressed assets like Draco and KTX2. The loader handles these compressed formats directly, enabling efficient asset loading and reduced file sizes for web-based applications.

What is the best way to track 3D asset loading progress in Three.js?▼

The best way to track 3D asset loading progress in Three.js is using a LoadingManager. It coordinates multiple loaders and provides callbacks for start, load, progress, and error events during the loading sequence.

Can I load HDR environments and 3D models together in a Three.js project?▼

Yes, you can load HDR environments and 3D models together in a Three.js project. The loader supports HDR/EXR environments alongside formats like GLTF, FBX, and OBJ, coordinating them efficiently with built-in caching.

Why does my Three.js asset loading fail when fetching multiple models?▼

Three.js asset loading can fail when fetching multiple models due to unhandled asynchronous errors. Using a loader with built-in error-handling utilities and THREE.Cache management ensures robust production pipelines and prevents silent failures.

When do I need LoadingManager for Three.js asset loading?▼

You need a LoadingManager for Three.js asset loading when coordinating multiple loaders simultaneously. It tracks overall progress and manages start, load, and error callbacks, which is essential for complex scenes like interactive games.