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.