# 3d Design

> 3D scene work in the browser — a scaffolder that emits a self-contained Three.js scene as one HTML file (CDN import, OrbitControls, three-point lighting, grid, and your chosen primitives laid out), plus the design discipline for making 3D scenes that don't look like tutorial demos. No build step; open the file in a browser.

- Skill: `trac3r00/3d-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add trac3r00/3d-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/trac3r00/3d-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: trac3r00 (https://skillmd.com/u/trac3r00)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/trac3r00/3d-design

---


# 3D Design

Three.js scenes that don't look like the getting-started tutorial.

## Scaffold

```bash
python3 scripts/scaffold_3d.py --objects cube,sphere,torus --out scene.html
python3 scripts/scaffold_3d.py --objects points,plane --camera 4,3,6 --bg 0x0a0a12
```

Objects: cube, sphere, plane, torus, cone, cylinder, points (2k-particle
field). Output is one self-contained HTML file — open it, it renders, it
has orbit controls.

## Design discipline (what separates scenes from demos)

1. **Lighting is the scene.** Ambient + key + fill at minimum; the scaffold
   gives you all three. A scene with one light looks like a default.
2. **One hero object.** Everything else is context. The layout arranges
   primitives as a set — pick the one the camera opens on.
3. **Color restraint.** The scaffold assigns a palette progression; keep it
   to 2-3 hues. Rainbow primitives read as a debug view.
4. **Motion with purpose.** If it rotates, say why. Ambient rotation on
   everything is the "AI slop" of 3D.
5. **Verify in the renderer.** Open the file, look at it, screenshot it
   (appshot or Playwright). A scene you haven't seen isn't done.

## Pairs with

`design` (the taste standard), `algorithmic-art` (2D generative work),
`appshot` (capture the rendered scene).