threejs-loaders skill: load glTF, textures and HDR in three.js r186

Makes your agent load 3D models, textures and environment maps in three.js with the current r186 API.

Installs: 14.5K; on skills.sh
Stars: 3.9K; on GitHub
Updated: Oct 2026; last repo commit

This skill gives your agent current three.js loading code, so it stops using renamed or removed APIs. It covers glTF with Draco, meshopt and KTX2 compression, OBJ, FBX, STL, PLY and USD, textures and color spaces, HDR and EXR environments, loading progress, cloning and disposal, and a WebGPU and TSL section.

It triggers when you load 3D models, textures or environment maps, or manage loading progress. It targets three.js r186. A Common Mistakes list gives the old pattern and its fix, such as RGBELoader becoming HDRLoader.

Good for

Developers loading glTF or GLB models in three.js
Anyone fixing washed-out textures or black models
Teams moving to WebGPURenderer and TSL

Install threejs-loaders

Claude Code

Copy this prompt.

Install the threejs-loaders skill in Claude Code. Run this command:

npx skills add cloudai-x/threejs-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The README's install installs the whole 13-skill pack, with the manual copy putting all of them in ~/.claude/skills/ (or .claude/skills/ for one project). The SKILL.md only lists sibling skills under See Also, so this skill works alone.

From the project README. Source.

What's in the skill

When it loads

Loading three.js assets: glTF with Draco, meshopt and KTX2 compression, other model formats, textures, HDR and EXR environments, progress, caching, cloning and disposal. Use when loading 3D models, textures or environment maps, or managing loading progress, on WebGL or with WebGPU and TSL.

Sections in SKILL.md

Quick Start
LoadingManager
Texture Loading
Texture configuration
CubeTextureLoader
HDR Environments
glTF and GLB
Draco, meshopt and KTX2 compression
Processing loaded content
Other Model Formats
OBJ + MTL
FBX
STL
PLY
USD
Async Patterns and Custom Sources

Key facts

Author: CloudAI-X (repo owner; the README describes the three.js skills pack)
Repo: cloudai-x/threejs-skills, folder skills/threejs-loaders
Installs on skills.sh: 14,461 as of 2 Nov 2026
GitHub stars: 3,903 for the whole cloudai-x/threejs-skills repo, 2 Nov 2026
License: MIT (threejs-skills README)
Last commit in the repo: 2026-10-19
What is inside: 1 file (SKILL.md only)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass
Targets: three.js r186

What it includes

GLTFLoader with a RoomEnvironment so PBR materials are lit
A minimal scene that loads a .glb with loadAsync. It notes that glTF PBR materials render black without lights or an environment.
Try: “Load model.glb in my three.js scene with a neutral environment light.”
Read · Quick start
Progress, errors and aborting in-flight loads
Shared progress tracking, and manager.abort() to cancel loads.
Read · LoadingManager
TextureLoader, CubeTextureLoader, sRGB vs NoColorSpace
Color maps get SRGBColorSpace; normal, roughness and similar maps stay NoColorSpace.
Read · Textures and color spaces
HDRLoader, EXRLoader, UltraHDRLoader
Includes the rename from RGBELoader to HDRLoader.
Read · HDR environments
Draco, meshopt and KTX2 decoders, processing loaded content
Decoder setup and traversing a loaded scene.
Read · glTF and GLB
OBJ+MTL, FBX, STL, PLY, USD
Loader imports and quirks, such as PLY double properties.
Read · Other formats
loadAsync, fetch, setURLModifier
Includes redirecting asset URLs to a CDN with a LoadingManager.
Network · Async patterns and custom sources
SkeletonUtils.clone and freeing geometry, materials, textures
Why gltf.scene.clone() shares the skeleton and how to free GPU memory.
Read · Cloning and disposal
Loading with WebGPURenderer
The same loaders under the three/webgpu build.
Read · WebGPU and TSL
Old pattern, fix and reason, one per line
A list of outdated patterns that models still use.
Read · Common Mistakes

From the official docs

Questions

What does the threejs-loaders skill do?

It makes your agent write current three.js loading code for glTF, textures, HDR environments and other formats, and avoid outdated patterns.

How do I install it?

Use the install box on this page. The README's npx skills add cloudai-x/threejs-skills installs the whole three.js pack (13 skills in its table), a --skill threejs-loaders flag installs just this one, and the README also documents a manual copy into ~/.claude/skills/.

Which three.js version does it target?

Release r186. Its examples use WebGLRenderer, and one section covers WebGPURenderer and TSL.

Do I need the other three.js skills?

No. The SKILL.md only points to threejs-fundamentals, threejs-textures, threejs-materials, threejs-asset-pipeline and threejs-animation in its See Also list. They come in the same pack.

Is it safe to run?

It is a reference file and bundles no scripts. It changes the code it writes in your project, so review the diff as usual.

Information

updated Nov 2, 2026

Repository: cloudai-x/threejs-skills
Folder: skills/threejs-loaders

cloudai-x/threejs-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

threejs-skills README · github.com
threejs-loaders SKILL.md · github.com
threejs-skills README · github.com