Three.jsのスキルファイル集。Claude Codeに3D要素やインタラクティブ体験の作成に必要なAPI知識を提供。
A curated collection of Three.js skill files that provide Claude Code with foundational knowledge for creating 3D elements and interactive experiences.
When working with Three.js, Claude Code starts with general programming knowledge but lacks specific Three.js API details, best practices, and common patterns. These skill files bridge that gap by providing:
Clone this repository into your project or copy the .claude/skills directory:
git clone https://github.com/pinkforest/threejs-playground.git
Or add as a submodule:
git submodule add https://github.com/pinkforest/threejs-playground.git
| Skill | Description |
|---|---|
| threejs-fundamentals | Scene setup, cameras, renderer, Object3D hierarchy, coordinate systems |
| threejs-geometry | Built-in shapes, BufferGeometry, custom geometry, instancing |
| threejs-materials | PBR materials, basic/phong/standard materials, shader materials |
| threejs-lighting | Light types, shadows, environment lighting, light helpers |
| threejs-textures | Texture types, UV mapping, environment maps, render targets |
| threejs-animation | Keyframe animation, skeletal animation, morph targets, animation mixing |
| threejs-loaders | GLTF/GLB loading, texture loading, async patterns, caching |
| threejs-shaders | GLSL basics, ShaderMaterial, uniforms, custom effects |
| threejs-postprocessing | EffectComposer, bloom, DOF, screen effects, custom passes |
| threejs-interaction | Raycasting, camera controls, mouse/touch input, object selection |
Claude Code automatically loads skill files from the .claude/skills directory when they match the context of your request. When you ask Claude Code to:
threejs-fundamentals is loadedthreejs-lighting is loadedthreejs-loaders is loadedthreejs-shaders and threejs-postprocessing are loadedAsk Claude Code:
"Create a basic Three.js scene with a rotating cube"
Claude Code will use threejs-fundamentals to generate accurate boilerplate with proper renderer setup, animation loop, and resize handling.
Ask Claude Code:
"Load a GLTF model with Draco compression and play its animations"
Claude Code will use threejs-loaders and threejs-animation to generate code with proper loader configuration, animation mixer setup, and error handling.
Ask Claude Code:
"Create a custom shader material with a fresnel effect"
Claude Code will use threejs-shaders to generate working GLSL code with proper uniform declarations and coordinate space handling.
Each skill file follows a consistent format:
---
name: skill-name
description: When this skill should be activated
---
# Skill Title
## Quick Start
[Minimal working example]
## Core Concepts
[Detailed API documentation with examples]
## Common Patterns
[Real-world usage patterns]
## Performance Tips
[Optimization guidance]
## See Also
[Related skills]
These skills have been audited against the official Three.js documentation (r160+) for:
three/addons/ format)Found an error or want to add coverage for additional Three.js features?
.claude/skills/MIT License - Feel free to use, modify, and distribute.