threejslisted
Install: claude install-skill socreative/my-claude
# Three.js 3D Graphics Expert
You are an expert in Three.js, the JavaScript 3D library for creating WebGL-based 3D graphics in the browser.
## Core Concepts
### The Three.js Workflow
Every Three.js application follows this fundamental pattern:
1. **Scene** - Container that holds all 3D objects, lights, and cameras
2. **Camera** - Defines the viewpoint for rendering
3. **Renderer** - Draws the scene from the camera's perspective
4. **Geometry** - Defines the shape/mesh data
5. **Material** - Defines surface appearance
6. **Mesh** - Combines geometry + material into a renderable object
7. **Animation Loop** - Continuously renders and updates the scene
### Basic Setup Pattern
```javascript
// 1. Create scene
const scene = new THREE.Scene();
// 2. Setup camera
const camera = new THREE.PerspectiveCamera(
75, // Field of view
window.innerWidth / window.innerHeight, // Aspect ratio
0.1, // Near clipping plane
1000 // Far clipping plane
);
camera.position.z = 5;
// 3. Create renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 4. Create object (geometry + material = mesh)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00