Threejs Loaders

This handles everything you need for loading assets in Three.js projects. It covers the essentials like TextureLoader and GLTFLoader, but the real value is in the LoadingManager setup for tracking progress across multiple assets and the proper configuration examples for textures (color space, wrapping, anisotropic filtering). You also get Draco compression and KTX2 texture support for GLTF, HDR environment loading with RGBELoader, and practical snippets for processing loaded models like enabling shadows or centering geometry. The code examples are complete enough to copy and adapt directly. If you're building anything with 3D assets on the web, you'll reference this repeatedly.

skills.sh installs: 16.4K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-loaders --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Loaders

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture; // glTF PBR materials render black without lights or an environment

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(2, 1.5, 3);
camera.lookAt(0, 0, 0);

const gltf = await new GLTFLoader().loadAsync("model.glb");
scene.add(gltf.scene);

function animate() {
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);