Skip to content
Get packs

Three.js Procedural Towers

Build pagodas, castles and domes procedurally in Three.js with a clipping-plane construction animation

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

Teaches an AI agent how to generate architectural landmarks such as pagodas, castles, domes and spires in Three.js from parameters rather than pre-made 3D model files. It also explains how to animate the building assembling itself, with finished masonry rising up through scaffolding, instead of simply fading in. The agent gets a set of geometry helpers, roof-shaping formulas, and common pitfalls to avoid, such as inverted faces and NaN errors.

Great for

  • Front-end developers building 3D hero scenes or landmark visualisations in Three.js
  • Designers or motion artists making architectural title sequences or construction studies
  • Creators who want procedurally generated buildings from parameter tables rather than modelled assets

Skip it if

  • People who need ready-made 3D models or do not write or run Three.js code (the skill assumes familiarity with WebGL concepts)
  • Projects that need photorealistic architecture or engineering-accurate structures, since the approach is stylised and parametric

Try asking

  • “Build a procedural East Asian pagoda in Three.js with a roof that curls up at the corners”
  • “Create a build animation where a castle assembles itself from the ground up using a clipping plane”
  • “Generate an Ottoman-style dome with a clipped cap and scaffolding that stands ahead of the finished stonework”
Step-by-step guide: how to use Three.js Procedural TowersInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    threejs-towers.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip threejs-towers.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip threejs-towers.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start from the included demo/index.html to see the intended output before adapting the builders to a new style.
  • Ask the agent to get one prism or roof right first, then reuse its vertex ordering, since winding errors are the most common problem.
  • Describe the building's proportions and number of storeys so the agent can size details as fractions of each face.

What's inside

  • agents/openai.yaml
  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.