SKILL.md

threejs-loaders

Agent skill fromCloudAI-X/threejs-skills

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.

install threejs-loaders

# install the threejs-skills pack with the skills CLI

npx skills add CloudAI-X/threejs-skills

# or add only this skill to Claude Code: copy the folder

skills/threejs-loaders/

# into

~/.claude/skills/threejs-loaders/ (all projects)

.claude/skills/threejs-loaders/ (one project)

skills/threejs-loaders/SKILL.md

MITFull file

1# Three.js Loaders
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
10import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";
11 
12const renderer = new THREE.WebGLRenderer({ antialias: true });
13renderer.setPixelRatio(window.devicePixelRatio);
14renderer.setSize(window.innerWidth, window.innerHeight);
15document.body.appendChild(renderer.domElement);
16 
17const scene = new THREE.Scene();
18scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture; // glTF PBR materials render black without lights or an environment
19 
20const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
21camera.position.set(2, 1.5, 3);
22camera.lookAt(0, 0, 0);
23 
24const gltf = await new GLTFLoader().loadAsync("model.glb");
25scene.add(gltf.scene);
26 
27function animate() {
28  renderer.render(scene, camera);
29}
30 
31renderer.setAnimationLoop(animate);
32```
33 
34## LoadingManager
35 
36One manager coordinates several loaders and reports combined progress. `loadAsync` still rejects on failure; `manager.onError` fires as well.
37 
38```javascript
39import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
40 
41const manager = new THREE.LoadingManager();
42 
43manager.onStart = (url, loaded, total) => {
44  console.log(`Started loading: ${url}`);
45};
46…

Excerpt shown under the repository's MIT license.

How to install threejs-loaders

skills/threejs-loaders/SKILL.md

More skills in threejs-skills

Newsletter

Join the Community