threejs-loaders

Load GLTF, GLB, HDR, EXR, OBJ, FBX, STL, and PLY assets into Three.js scenes.

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/mitgar14/app-embebidos --skill threejs-loaders-mitgar14
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/mitgar14/app-embebidos/tree/main/.claude/skills/threejs-loaders
Command: npx skills add https://github.com/mitgar14/app-embebidos --skill threejs-loaders-mitgar14

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you reliably load 3D assets into a Three.js scene without hand-writing repetitive loader setup, progress tracking, and fallback logic each time you add a new model or texture.

Core Features & Use Cases

  • Load GLTF and GLB models for web scenes and interactive experiences.
  • Configure texture, cube texture, HDR, and EXR loading for materials and environment maps.
  • Handle many common asset formats including OBJ, FBX, STL, and PLY, plus Draco and KTX2 compression workflows.
  • Manage asynchronous loading, caching, custom paths, and error recovery for production-ready asset pipelines.
  • Use case: bring a compressed museum exhibit model into a scene, apply its textures, and show a loading bar until everything is ready.

Quick Start

Use the threejs-loaders skill to load a GLTF model, its textures, and an environment map into a Three.js scene with progress feedback.

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 and GLB 3D models into a Three.js scene?

Load GLTF and GLB 3D models into Three.js by configuring the loader, applying textures, and managing asynchronous initialization. This approach handles Draco compression and tracks loading progress to ensure assets render reliably in web scenes.

What is the best way to handle HDR and EXR environment maps in Three.js?

Handle HDR and EXR environment maps in Three.js by configuring texture and cube texture loaders. This setup applies environment lighting to materials while asynchronously tracking loading progress for production-ready asset pipelines.

Can I load OBJ, FBX, STL, and PLY files with Three.js without writing custom setup code?

You can load OBJ, FBX, STL, and PLY files by utilizing pre-built loader configurations. This eliminates repetitive setup by managing custom resource paths, caching, and resilient error handling for each format automatically.

How do I use LoadingManager to show a progress bar for 3D assets in Three.js?

Use LoadingManager in Three.js to track asynchronous loading progress and display feedback like a loading bar. It monitors the asset pipeline, managing textures and models until everything initializes for the scene.

Does this Three.js asset loader support Draco and KTX2 compression workflows?

Yes, the Three.js asset loader supports Draco and KTX2 compression workflows. It configures the necessary decompression libraries and caching to ensure compressed 3D models and textures load efficiently into web scenes.

Why does my Three.js asset pipeline fail when loading compressed 3D models with custom paths?

Three.js asset pipelines fail with compressed models due to missing path configurations or unsupported compression libraries. Implementing resilient error handling and proper caching recovers the pipeline and ensures reliable loading.