Agent skill
threejs-loaders
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/threejs-loaders
SKILL.md
Three.js Loaders
LoadingManager
const manager = new THREE.LoadingManager();
manager.onStart = (url, loaded, total) => console.log("Started");
manager.onLoad = () => console.log("All loaded!");
manager.onProgress = (url, loaded, total) => {
console.log(`${(loaded / total * 100).toFixed(1)}%`);
};
manager.onError = (url) => console.error(`Error: ${url}`);
const textureLoader = new THREE.TextureLoader(manager);
const gltfLoader = new GLTFLoader(manager);
GLTF/GLB Loading
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const loader = new GLTFLoader();
loader.load("model.glb", (gltf) => {
const model = gltf.scene;
scene.add(model);
// Enable shadows
model.traverse((child) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
// Animations
const mixer = new THREE.AnimationMixer(model);
gltf.animations.forEach(clip => mixer.clipAction(clip).play());
});
GLTF with Draco Compression
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.6/");
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
HDR Loading
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
new RGBELoader().load("environment.hdr", (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
scene.background = texture;
});
Promise-Based Loading
function loadModel(url) {
return new Promise((resolve, reject) => {
new GLTFLoader().load(url, resolve, undefined, reject);
});
}
async function init() {
const [model, env] = await Promise.all([
loadModel("model.glb"),
loadRGBE("environment.hdr")
]);
scene.add(model.scene);
scene.environment = env;
}
Other Formats
// OBJ
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
// FBX
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
// STL
import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?