← All skills · 3D · Three.js Scene Builder

Three.js Scene Builder — finished output
Runs inClaude Code Codex Cursor Muse Dot Grok Bot Cue OpenClaw Hermes
Install guidesClaude Code Codex Cursor Muse
Needs:A scene brief (brief.txt: [objects] id: shape | size … | pos … | material …; [lights]; [camera]; [scene]) and a browser with WebGL to view the scene.

Similar Skills

Blender Scene Assistant previewFree

Blender Scene Assistant

  1. Write the scene brief in plain text
  2. Run the generator on the brief
  3. Read the report before trusting the scene
  4. Render in Blender, headless or in the viewport
  5. Fix errors and rerun

View all skills →

What you get

  • A standalone scene.html: import map, renderer with shadows, every object with its standard material
  • OrbitControls and a turntable animation, plus a resize handler
  • A scene report: object and light tables plus every error and warning
  • A module script parse-checked with node --check as part of every run

Good fit

  • Product turntables and 3D web scenes to share as a link
  • Prototyping a 3D scene before wiring it into a site
  • Keeping a scene honest: only what is listed gets built

Not for

  • Complex loaded models (GLTF/FBX) — primitives only
  • Inventing missing objects, lights, or a backdrop to complete a scene
  • Proving a scene looks good — a clean report means it matches the brief, not reality

Sample output

An example of what this Skill produces. Sample content, shown for illustration.

Three.js Scene Builder report — sample

Scene report: Yellow Mug Turntable

Objects: 3 valid | Lights: 2 | Camera: custom | Background: #262627 | Turntable: on

Objects: pedestal (cylinder 2.0, 0.15); mug (cylinder 0.9, 1.1); backdrop (plane 12, 12).

Errors: none. Warnings: none. Module node --check: OK.

Messy draft check: 2 valid objects, 3 errors (unknown capsule shape; duplicate mug id; negative-size badbox), 1 warning (missing camera — default added).

About this Skill

You say
Build me a Three.js product turntable: a yellow mug on a dark pedestal, light backdrop, orbit controls.

How to install

  1. Copy the install prompt into your agent: Read https://skillu.dev/install/agent.md, then install the Three.js Scene Builder skill (threejs-scene-builder).
  2. Or download the Skill package from this page after launch and place its folder in your agent’s skills directory.
  3. Call it with a slash command, e.g. /threejs-scene-builder, and describe what you want in plain words.

FAQ

What happens if my brief has an error?

The scene still generates from the valid parts, and the report lists every error and warning: unknown shapes are dropped, duplicate ids keep their first definition, bad sizes are named, and a missing camera is replaced by a stated default. Fix the brief and rerun.

Does it build anything I did not list?

No. Only objects, lights and settings from your brief appear. A missing backdrop or second light is a brief gap to fix, not something the skill fills in.

Does the scene need a server?

Any static host or a one-line local server works (python3 -m http.server). The page loads three.js 0.160.0 from the unpkg CDN; to run fully offline, download the module and the OrbitControls addon locally and point the import map at them.

Get Premium access Browse more skills