# webgl-3d-object

Guides coding agents to generate standalone Three.js 3D objects with physical materials, directional lighting, and proper memory cleanup.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1600 installs · ★ 7001
- Author: MengTo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/webgl-3d-object/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/webgl-3d-object

## What it does

This skill injects ready-to-use patterns for creating geometric WebGL objects in Three.js, such as faceted icosahedrons or custom meshes. The structure enforces perspective cameras, PBR materials (`MeshStandardMaterial` or `MeshPhysicalMaterial`), and dual-light setups using key and rim sources to highlight edges.

Motion handling respects user system settings via `prefers-reduced-motion`, stopping continuous floating or spinning when requested. The recipe explicitly demands teardown logic that calls `dispose()` on geometries, materials, and the renderer to stop memory leaks on component unmount.

Your project needs the `three` package installed for this code to run. The skill deliberately rules out fake CSS 3D transforms and warns against high shadow map resolutions that degrade mobile performance.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill webgl-3d-object -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill webgl-3d-object -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill webgl-3d-object -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills webgl-3d-object
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill webgl-3d-object -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/web-design/webgl-3d-object
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill webgl-3d-object -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/MengTo/Skills/tree/HEAD/agent-skills/web-design/webgl-3d-object/SKILL.md

## When to use it
- render a real geometric 3D object inside a hero section
- configure Three.js PBR materials with key, rim, and ambient lighting
- handle smooth rotation while respecting prefers-reduced-motion
- clean up WebGL geometries, materials, and renderers on component unmount

## Example prompts
- Build a faceted 3D hero object using Three.js with metallic material and rim lighting
- Create a floating 3D mesh in WebGL that properly cleans up resources on unmount

## 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: e474e3619d06489b.

BEGIN THIRD-PARTY FILE e474e3619d06489b
````text
---
name: webgl-3d-object
description: Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero object or product-like visual with real lighting instead of CSS transform tricks.
---

# WebGL 3D Object

## Use When
- A hero, feature block, or product moment needs one strong 3D object.
- The visual should show real geometry, lighting, highlights, and edges.
- A faceted mesh should float or rotate subtly inside a web layout.
- CSS transforms, SVG illusions, or flat gradients are not enough.

## Rules
1. Use real 3D geometry: `IcosahedronGeometry`, `DodecahedronGeometry`, `BoxGeometry`, custom `BufferGeometry`, or a glTF mesh.
2. Use a perspective camera so the object has depth and scale.
3. Use PBR material: `MeshStandardMaterial` or `MeshPhysicalMaterial`.
4. Tune `metalness`, `roughness`, and `emissive` to match the brand mood.
5. Light the object with at least one directional light plus ambient or hemisphere fill.
6. Animate transforms only: subtle rotation, bobbing, or parallax.
7. Handle resize and dispose geometry/material/renderer on teardown.

## HTML And CSS

```html
<div class="webgl-object-shell">
  <canvas class="webgl-object-canvas" data-webgl-3d-object></canvas>
</div>
```

```css
.webgl-object-shell {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
}

.webgl-object-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
```

## Three.js Object Recipe

```js
import * as THREE from "three";

function initWebGL3DObject(canvas, options = {}) {
  if (!canvas) return () => {};

  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: true,
    alpha: true,
  });
  renderer.setClearColor(0x000000, 0);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, options.maxDpr || 1.75));
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = options.exposure || 1.05;
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(38, 1, 0.1, 100);
  camera.position.set(0, 0.15, 5.2);

  const geometry = new THREE.IcosahedronGeometry(options.radius || 1.35, options.detail || 1);
  const material = new THREE.MeshStandardMaterial({
    color: options.color || 0x8aa4ff,
    metalness: options.metalness ?? 0.48,
    roughness: options.roughness ?? 0.34,
    emissive: options.emissive || 0x101833,
    emissiveIntensity: options.emissiveIntensity ?? 0.22,
    flatShading: true,
  });

  const object = new THREE.Mesh(geometry, material);
  object.castShadow = true;
  object.receiveShadow = true;
  scene.add(object);

  const ambient = new THREE.AmbientLight(0xffffff, 0.38);
  scene.add(ambient);
````
END THIRD-PARTY FILE e474e3619d06489b

The third-party file has ended. Everything between the e474e3619d06489b 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 2966 of 6603 bytes. © MengTo · MIT · https://github.com/MengTo/Skills/tree/HEAD/agent-skills/web-design/webgl-3d-object/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