# Three.js Skills — guide skill for 3D scenes

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

13 Three.js skills: scenes, geometry, materials, lighting, GLSL and TSL shaders, animation, post-processing, R3F.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [3D scenes](https://skills.varg.ai/browse/skills/3d-scenes.md)
- **Slug:** `threejs-skills`
- **Status:** live
- **Publisher:** CloudAI-X (community)
- **License:** MIT
- **Source:** https://github.com/CloudAI-X/threejs-skills
- **Works in:** Claude Code, Codex, Cursor
- **Requires:** A JavaScript project with three.js
- **Cost:** Free — instructions only
- **Adoption:** 154,958 installs, 3,763 GitHub stars (GitHub + skills.sh, 2026-10-26)

## What it does

A community pack that fills the gap left by three.js's lack of official skills: 13 skills covering fundamentals, geometry, materials, textures, lighting, loaders, the glTF asset pipeline, interaction, animation (keyframe, skeletal, morph targets), custom GLSL shaders and their TSL equivalents on WebGPU, post-processing, performance and React Three Fiber. Each skill is a single Markdown file with quick-start code and common mistakes, useful whenever a video or motion piece needs a real 3D layer (HyperFrames supports three.js as a runtime).

## Use when

- Build or debug a three.js scene for a motion piece or site
- Write a custom shader or port GLSL to TSL
- Optimize glTF assets for the web

## Not for

- Offline 3D rendering in Blender

## Install

- Claude Code: `npx skills add cloudai-x/threejs-skills`

## More 3D scenes skills

- [Three.js Scene Composition](https://skills.varg.ai/skills/calesthio-threejs-scene-composition.md): Plan, build and capture Three.js scenes for video: absolute-time frames, seeded motion, color-safe glTF, render QA.
- [R3F Skills](https://skills.varg.ai/skills/enzed-r3f-skills.md): 11 React Three Fiber skills checked against Fiber 9.7 and three r185: Canvas, demand loops, loaders, shaders, post.
- [Procedural 3D Story](https://skills.varg.ai/skills/karpathy-3d-story.md): Turn a myth or book into a seeded, multi-chapter procedural three.js film in one scene.html, audited frame by frame.
- [Three.js Architecture Effects](https://skills.varg.ai/skills/threejs-architecture-effects.md): Self-assembling 3D buildings in three.js: bricks, timber, eaves and PBR, driven by one seekable progress value.