# threejs-webgl

Configures coding agents to build Three.js scenes, set up WebGL or WebGPU renderers, adjust lighting, and load glTF models for web 3D apps.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 installs · ★ 1133
- Author: freshtechbro
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/core-3d-animation/skills/threejs-webgl/SKILL.md
- Updated: 2025-11-20
- HTML: https://affpapa.org/en/nevibecode/skills/threejs-webgl

## What it does

This skill provides architecture guidelines and code patterns for Three.js. It directs the agent to set up standard scenes with `PerspectiveCamera`, `WebGLRenderer`, and `OrbitControls`, as well as modern `WebGPURenderer` instances with `setAnimationLoop`.

Inside are configurations for three-point lighting, physical point lights with lumen values, soft shadows with `PCFSoftShadowMap`, and `InstancedMesh` for rendering thousands of objects. For Draco-compressed assets, you must specify the decoder path in `setDecoderPath`, or model loading fails immediately. The skill also covers loading `.glb` files with `GLTFLoader` and controlling playback via `AnimationMixer`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill threejs-webgl -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/threejs-webgl/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/threejs-webgl/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill threejs-webgl -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/threejs-webgl/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill threejs-webgl -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/threejs-webgl/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills threejs-webgl
```

2. **Manually: put the files in place**
- File: `.github/skills/threejs-webgl/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill threejs-webgl -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/core-3d-animation/skills/threejs-webgl
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/threejs-webgl/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill threejs-webgl -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/core-3d-animation/skills/threejs-webgl/SKILL.md

## When to use it
- Set up a Three.js scene with orbit controls, lighting, and window resize handling
- Switch from WebGL to WebGPURenderer with tone mapping configuration
- Render thousands of duplicate 3D objects efficiently using InstancedMesh
- Load Draco-compressed glTF assets and run animations through AnimationMixer
- Configure three-point lighting and soft shadows with PCFSoftShadowMap

## Example prompts
- Set up a Three.js scene with PerspectiveCamera, OrbitControls, and a resize handler.
- Load model.glb using GLTFLoader with DRACOLoader and enable cast shadows on all child meshes.
- Use InstancedMesh to render 1000 spheres at random positions with distinct colors.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a6e7ad9f83c723b5.

BEGIN THIRD-PARTY FILE a6e7ad9f83c723b5
````text
---
name: threejs-webgl
description: Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.
---

# Three.js WebGL/WebGPU Development

## Overview

Three.js is the industry-standard JavaScript library for creating 3D graphics in web browsers using WebGL and WebGPU. This skill provides comprehensive guidance for building performant, interactive 3D experiences including scenes, cameras, renderers, geometries, materials, lights, textures, and animations.

## Core Concepts

### Scene Graph Architecture

Three.js uses a hierarchical scene graph where all 3D objects are organized in a tree structure:

```javascript
Scene
├── Camera
├── Lights
│   ├── AmbientLight
│   ├── DirectionalLight
│   └── PointLight
├── Meshes
│   ├── Mesh (Geometry + Material)
│   └── InstancedMesh
└── Groups
```

### Essential Components

Every Three.js application requires these core elements:

1. **Scene**: Container for all 3D objects
2. **Camera**: Defines the viewing perspective
3. **Renderer**: Draws the scene to canvas (WebGL or WebGPU)
4. **Geometry**: Defines the shape of objects
5. **Material**: Defines the surface appearance
6. **Mesh**: Combines geometry and material

## Quick Start Pattern

### Basic Scene Setup

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);

const camera = new THREE.PerspectiveCamera(
  75, // FOV
  window.innerWidth / window.innerHeight, // Aspect ratio
  0.1, // Near clipping plane
  1000 // Far clipping plane
);
camera.position.set(0, 2, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
directionalLight.castShadow = true;
scene.add(directionalLight);

// Controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// Animation Loop
function animate() {
````
END THIRD-PARTY FILE a6e7ad9f83c723b5

The third-party file has ended. Everything between the a6e7ad9f83c723b5 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2710 of 15731 bytes. © freshtechbro · MIT · https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/core-3d-animation/skills/threejs-webgl/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md