threejs-loaders_skill

This skill helps you manage three.js asset loading with loaders, progress tracking, and best practices for textures, models, and HDR environments.

958

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill cloudai-x/threejs-skills --skill threejs-loaders

SKILL.md13.7 KB

Overview

This skill provides a practical guide and helpers for loading 3D assets in Three.js: GLTF/GLB models, textures, HDR/EXR environments, and other model formats. It focuses on loader configuration, progress management, caching, and async patterns so you can integrate assets reliably into scenes. Use it to standardize loading workflows and improve load-time UX and runtime performance.

How this skill works

It demonstrates using Three.js loaders (GLTFLoader, TextureLoader, CubeTextureLoader, RGBELoader, EXRLoader, and format-specific loaders) together with a LoadingManager to coordinate and report progress. Examples show texture configuration (color space, wrapping, filtering), environment prefiltering via PMREMGenerator, and optional compression support (DRACO, KTX2). Async wrappers, caching, and asset manager patterns are provided for promise-based loading, retries, and reuse.

When to use it

Loading GLTF/GLB models with animations or embedded cameras
Applying color/roughness/normal textures and HDR environment maps for PBR materials
Coordinating multiple simultaneous loads and showing progress UI
Serving compressed assets (DRACO, KTX2) to reduce bandwidth and memory
Loading models from Blob, ArrayBuffer, CDN, or fallback URLs

Best practices

Use LoadingManager to track and display overall progress
Set correct colorSpace on textures (SRGB for albedo, linear for data maps)
Generate PMREM for HDR/EXR environments and dispose temporary textures
Enable THREE.Cache for repeat requests and implement a custom AssetManager for cloning and disposal
Use compressed formats (DRACO for geometry, KTX2/Basis for textures) and lazy-load distant assets

Example use cases

Promise-wrap GLTFLoader for async/await loading and error handling
Use RGBELoader + PMREMGenerator to add realistic scene lighting from HDRI
Set up DRACOLoader and KTX2Loader when serving compressed models and textures
Build an AssetManager that caches textures and clones models to avoid repeated parsing
Show a placeholder mesh while a large model downloads and replace it on load

FAQ

Use THREE.LoadingManager and its onStart/onProgress/onLoad callbacks; attach loaders to the manager so onLoad fires when all tracked assets finish.

When should I use PMREMGenerator?

Run PMREMGenerator on equirectangular HDR/EXR textures to produce a prefiltered environment map for PBR materials; dispose the original texture and the generator when done.

How can I retry failed loads or provide fallbacks?

Wrap loaders in Promises and implement retry logic with exponential backoff, or attempt a fallback URL on catch. Also consider timeouts with AbortController for fetch-based loads.