skills.rest
nicolasieber-tm
nicolasieber-tmCOMMUNITY
Explore all skills by this author →
GitHub

threejs-loaders

Load GLTF models, textures, and HDR environments in Three.js with progress tracking.

Updated Feb 2, 2026
Search Tags:#threejs#loading#GLTF#Texture#HDR#LoadingManager#DRACOLoader
One-click install
npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-loaders
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/nicolasieber-tm/threejs-skills/tree/main/skills/threejs-loaders
Command: npx skills add https://github.com/nicolasieber-tm/threejs-skills --skill threejs-loaders

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of reliably loading and coordinating multiple 3D assets in Three.js, including models, textures, and environment maps, while providing progress feedback and robust error handling.

Core Features & Use Cases

  • GLTF/GLB model loading with optional DRACO/KTX2 support
  • Texture and HDR environment loading via TextureLoader and RGBELoader
  • Centralized progress tracking using a LoadingManager
  • Asset orchestration, caching, and error handling for responsive experiences
  • Environment setup and scene integration (scene.background and scene.environment)

Quick Start

Use the loaders to fetch a GLTF model and a texture, coordinating with a LoadingManager. Load an HDRI with RGBELoader and apply it to the scene, then render once assets are ready.

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 HDR environments in Three.js?▼

To load GLTF models and HDR environments in Three.js, use GLTFLoader and RGBELoader coordinated by a LoadingManager. This fetches assets, configures scene.background, and renders once fully loaded.

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

The best way to manage 3D asset loading progress and errors is using a centralized LoadingManager. It orchestrates asset caching, tracks loading progress, and handles errors to ensure responsive experiences.

Can I use DRACO compression with GLTF models in Three.js?▼

Yes, you can use DRACO compression with GLTF models by implementing DRACOLoader. It enables efficient loading of compressed GLTF/GLB files while maintaining robust asset orchestration and error handling.

Does Three.js LoadingManager support coordinating multiple textures and environment maps?▼

Yes, LoadingManager supports coordinating multiple 3D assets including textures and environment maps. It uses TextureLoader and RGBELoader to fetch assets, providing centralized progress tracking and scene integration.

Why does my Three.js scene render before my GLTF model and HDR texture finish loading?▼

Your scene renders prematurely because asset loading is asynchronous. You must use a LoadingManager to track progress and only trigger scene.background and environment rendering once all assets are ready.

Related Skills

Explore More Software Engineering Skills→
MengToMengTo
4.5k

threejs

Implement interactive Three.js WebGL scenes with lifecycle management.

Community
Intermediate
Probably-GroupProbably-Group
3

threejs-tresjs

Generate secure Three.js/TresJS code for Vue-based WebGL 3D scenes.

Official
Intermediate
gyalamanch001agyalamanch001a

threejs-materials

Configure Three.js mesh materials for PBR shading and shader effects.

Community
Intermediate
code-review-benchmarkcode-review-benchmark

forge-pipeline-assets

Load and render .fmesh, .fmat, and pipeline-processed textures in SDL GPU apps.

Official
Advanced