# Threejs

Build 3D web apps with Three.js (WebGL/WebGPU).

- Repository: https://github.com/mrgoonie/claudekit-skills (2229 stars)
- Category: Design
- License: MIT
- Last updated: 2026-04-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mrgoonie/claudekit-skills --skill threejs -g -a claude-code -y`
Codex: `npx skills add mrgoonie/claudekit-skills --skill threejs -g -a codex -y`
Cursor: `npx skills add mrgoonie/claudekit-skills --skill threejs -g -a cursor -y`
Gemini CLI: `npx skills add mrgoonie/claudekit-skills --skill threejs -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mrgoonie/claudekit-skills`

## Description

Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Three.js Development

Build high-performance 3D web applications using Three.js - a cross-browser WebGL/WebGPU library.

## When to Use This Skill

Use when working with:
- 3D scenes, models, animations, or visualizations
- WebGL/WebGPU rendering and graphics programming
- Interactive 3D experiences (games, configurators, data viz)
- Camera controls, lighting, materials, or shaders
- Loading 3D assets (GLTF, FBX, OBJ) or textures
- Post-processing effects (bloom, depth of field, SSAO)
- Physics simulations, VR/XR experiences, or spatial audio
- Performance optimization (instancing, LOD, frustum culling)

## Progressive Learning Path

### Level 1: Getting Started
- Load `references/00-fundamentals.md` - Fundamentals
- Load `references/01-getting-started.md` - Scene setup, basic geometries, materials, lights, rendering loop

### Level 2: Common Tasks
- **Asset Loading**: `references/02-loaders.md` - GLTF, FBX, OBJ, texture loaders
- **Textures**: `references/03-textures.md` - Types, mapping, wrapping, filtering
- **Cameras**: `references/04-cameras.md` - Perspective, orthographic, controls
- **Lights**: `references/05-lights.md` - Types, shadows, helpers
- **Animations**: `references/06-animations.md` - Clips, mixer, keyframes
- **Math**: `references/07-math.md` - Vectors, matrices, quaternions, curves
- **Geometry**: `references/18-geometry.md` - Built-in shapes, BufferGeometry, custom geometry, instancing
- **Materials**: `references/11-materials.md` - PBR, basic, phong, lambert, physical, toon, normal, depth, raw, shader materials, material properties

### Level 3: Interactive & Effects
- **Interaction**: `references/08-interaction.md` - Raycasting, picking, transforms
- **Post-Processing**: `references/09-postprocessing.md` - Passes, bloom, SSAO, SSR
- **Controls (Addons)**: `references/10-controls.md` - Orbit, transform, first-person

The rest: https://github.com/mrgoonie/claudekit-skills/blob/HEAD/.claude/skills/threejs/SKILL.md