Three.js Skills
Ten reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
- 3,808 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills contain only reference instructions and code examples
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/three-js-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills contain only reference instructions and code examples
This is third-party code. Review the repository files before installing.
What it does
The skills give the agent accurate Three.js API details that a general model often lacks. Each file covers one area: basic scene and renderer, geometry and instancing, PBR materials, lights and shadows, textures, GLTF loading, GLSL shaders, EffectComposer effects, raycasting and camera controls. Each has a minimal working example, key class breakdowns, common patterns and performance tips. The agent loads the relevant skill based on the request.
Who it is for. For frontend developers building 3D scenes and interactive graphics in the browser.
Good fit when
- You need a Three.js scene with correct renderer and resize setup
- You need to load a Draco-compressed GLTF model and play its animations
- You need a custom shader or post-processing effect
Not a fit when
- The project uses React Three Fiber, Babylon.js or another engine
- You need a game on a full game engine
Example request
Build a Three.js scene with a rotating cube, soft shadows and a bloom effectLimitations
Content is checked against Three.js r160+ docs; older versions may differ in imports and APIs. The README clone command points to a different repository, so copying the skills manually is simpler. GitHub does not detect a license file, although the README states MIT.
How to disable. Delete the threejs-* folders from the agent's skills directory.
FAQ
Do I need all ten skills?
No, each stands alone, but they cross-reference each other, so the full set is handier.
Discussion
No questions or reviews yet.
Related
SkillsThree.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
Three.js Architecture Effects
threejs-architecture-effects
A skill building an orbitable Three.js building that assembles itself: brick, frame, procedural materials. The result is a working Vite and React site
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
Meng To's Agent Skills
Agent Skills
A skill library for expressive landing pages, animation, WebGL and Three.js browser games, with demos and prompts
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Motion Web
motion-web
Sites with motion first on pure Three.js, Canvas 2D, WebGL and CSS: damping physics, tokens, 7 examples. CC BY-NC 4.0 license
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Three.js Skills (this entry) | no | 3,808 | |
| Shaders | yes | 5,667 | skill and MCP server for Shaders |
| Machine Skill | no | 444 | one line naming a machine |
README in short
The README explains the gap: models know programming in general but stumble on Three.js API details. It lists the ten skills and which requests trigger each. It describes a shared file structure: quick start, concepts, patterns, performance and related skills. The author notes the content was audited against r160+ docs.
README badge
Original SKILL.md
---
name: threejs-animation
description: Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
---
# Three.js Animation
## Quick Start
```javascript
import * as THREE from "three";
// Simple procedural animation
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
const elapsed = clock.getElapsedTime();
mesh.rotation.y += delta;
mesh.position.y = Math.sin(elapsed) * 0.5;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
```
## Animation System Overview
Three.js animation system has three main components:
1. **AnimationClip** - Container for keyframe data
2. **AnimationMixer** - Plays animations on a root object
3. **AnimationAction** - Controls playback of a clip