Three.js Skills

Three.js Skills is a set of ten Agent Skill files that give AI coding agents accurate, current Three.js knowledge — scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, post-processing, and interaction — audited against the official Three.js r160+ documentation.

What is Three.js?

Three.js is the most widely used JavaScript 3D library for the web. It wraps WebGL in a scene-graph API — Scene, PerspectiveCamera, WebGLRenderer, Mesh, MeshStandardMaterial — and ships hundreds of add-ons under three/addons/ for GLTF loading, camera controls, and post-processing. It powers product configurators, data visualisations, browser games, and interactive marketing sites.

What the skills cover

• threejs-fundamentals — Scene, PerspectiveCamera and OrthographicCamera, WebGLRenderer configuration, the Object3D hierarchy, Vector3 / Matrix4 / Quaternion / Euler math, Clock-driven loops, responsive canvas resizing, and proper disposal on cleanup.
• threejs-geometry — built-in primitives, custom BufferGeometry and BufferAttribute, interleaved buffers, path-based and text geometry, EdgesGeometry, Points, Line, and InstancedMesh for high-count rendering.
• threejs-materials — MeshStandardMaterial and MeshPhysicalMaterial PBR (with glass and car-paint recipes), Basic/Lambert/Phong/Toon/Normal/Depth materials, ShaderMaterial vs RawShaderMaterial, and environment maps.
• threejs-lighting — AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight; shadow-map setup and optimisation; contact shadows; image-based lighting; light probes and helpers.
• threejs-textures — color space, wrapping modes, repeat/offset/rotation, filtering and mipmaps, data/canvas/video/compressed textures, cube maps, equirectangular-to-cubemap conversion, and HDR.
• threejs-animation — AnimationClip, AnimationMixer, AnimationAction, keyframe track types and interpolation modes, skeletal animation and bone attachments, morph targets, and additive blending.
• threejs-loaders — GLTFLoader with Draco and KTX2, LoadingManager progress, HDR/EXR plus PMREMGenerator, OBJ/MTL/FBX/STL/PLY, and promisified multi-asset loading.
• threejs-shaders — GLSL uniforms and varyings, vertex displacement, fresnel, rim lighting, noise and dissolve effects, gradients, and extending built-in materials with onBeforeCompile.
• threejs-postprocessing — EffectComposer, UnrealBloomPass and selective bloom, FXAA and SMAA, SSAO, depth of field, film grain, vignette, pixelation, outline, and custom ShaderPass effects like chromatic aberration.
• threejs-interaction — Raycaster click and hover detection, touch input, OrbitControls / FlyControls / FirstPersonControls / PointerLockControls / MapControls, TransformControls, DragControls, and box-selection systems.

How it works

Each skill is a single SKILL.md with YAML frontmatter — a name and a description that states exactly when to activate it. Copy the folders into your project’s .claude/skills/ directory and the agent loads the matching file on demand: ask for "a GLTF model with Draco compression that plays its animations" and it pulls in threejs-loaders and threejs-animation.

Every file follows the same shape — Quick Start, Core Concepts, Common Patterns, Performance Tips, See Also — so the agent reads a runnable example first and the API detail underneath, and the See Also links let it pull in a related skill when a task spans two areas.

Who it is for

Front-end and creative developers building 3D on the web with Claude Code, Cursor, or any agent that reads the Agent Skills format. It assumes you know JavaScript and a bundler; it does not assume you know the Three.js API.

What you can build

Product configurators, 3D portfolios and landing pages, scroll-driven WebGL scenes, GLTF model viewers, browser games, architectural walkthroughs, particle systems, custom shader effects, and data visualisations in three dimensions.

Why it matters

Three.js renames things as it evolves: outputEncoding became outputColorSpace, examples/jsm/ imports became the three/addons/ alias, and the legacy lighting mode was removed. Models trained on years of mixed tutorials blend all of those eras together, so agents confidently emit constructor signatures, property names, and import paths that no longer exist — code that fails at the first run.

These ten files were audited against the r160+ documentation for correct class names, constructor signatures, property names, and import paths, so what your agent writes compiles the first time.

1. Get the files

Clone the repository (or use the Download button above and unzip it):

git clone https://github.com/CloudAI-X/threejs-skills.git

The repository README lists a different clone URL (pinkforest/threejs-playground). Use the URL above — that is where these skill files live.

2. Copy the skills into your project

Claude Code loads skills from .claude/skills/:

mkdir -p .claude/skills
cp -R threejs-skills/skills/* .claude/skills/

Keep only the ones you need — each folder is self-contained:

cp -R threejs-skills/skills/threejs-fundamentals .claude/skills/
cp -R threejs-skills/skills/threejs-shaders .claude/skills/

Or add the repo as a submodule if you want to track upstream updates:

git submodule add https://github.com/CloudAI-X/threejs-skills.git vendor/threejs-skills

3. Install Three.js in your project

The skills document the API; they do not bundle the library.

npm install three

4. Use it

Start a new session and describe what you want in plain language:

Create a Three.js scene with a rotating cube, orbit controls, and a bloom pass.

The agent matches your request against each skill’s frontmatter description and loads only the relevant files.