Guide · Agent skill
How to use the Three.js Procedural Towers agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The threejs-towers skill teaches an AI agent to generate architectural landmarks such as pagodas, castles, domes and spires in Three.js from parameters, instead of loading pre-made 3D model files. It also shows the agent how to animate a building assembling itself, with finished masonry rising through scaffolding, rather than fading in. This guide explains what the skill does, how to install it, how to ask for it, and what to check before you rely on the result.
Three.js Procedural TowersMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the threejs-towers ZIP from the agent-skills directory page for agent-skills/web-design/threejs-towers.
- 2Unzip it into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Ask for a building. Start your request with $threejs-towers and describe the style, the build and the controls you want.
- 5Run the demo. Open the generated HTML in a browser or a Node-based dev setup with Three.js available, then scrub and orbit to check it.
- 6Check the output. Orbit at ground level, scrub through each stage and view the roof from above, using the checklist in SKILL.md.
What does the threejs-towers skill make the agent do?
The skill gives the agent a small geometry vocabulary. Ten builder functions all append into shared vertex, normal, UV and index arrays, so buildings are assembled from repeated, parameterised parts. A new style is one assembly function plus a table of levels, not a new model.
Roofs are shaped by a single profile function that maps a point along the eave to a position on the roof. Six numbers (lift, tip, flare, pow, trunc and ridge) control the roof types in the set. The skill also covers a build animation in which a clipping plane rises through the building, with everything below the line finished and scaffolding standing above it.
- Architectural styles named in the source: Japanese keep, Chinese pagoda, Ottoman dome, Khmer prasat and Vietnamese tháp.
- Hip roofs with flying eaves driven by one profile function.
- A caption and percentage display for each build stage.
- Common pitfalls the agent is told to avoid, such as inverted winding, NaN roofs and BoxGeometry UVs that do not scale with size.
How do you install the threejs-towers skill?
Download the ZIP for agent-skills/web-design/threejs-towers from the directory page. Then choose one of two routes.
For Claude Code, unzip the download into ~/.claude/skills/ to make it available everywhere, or into a project's .claude/skills/ folder to make it available only in that project. For the Claude apps, upload the ZIP under Settings, then Capabilities, then Skills.
- Personal install: unzip into ~/.claude/skills/.
- Project install: unzip into the project's .claude/skills/ folder.
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP.
How do you trigger the skill with a natural request?
You can name the skill directly, as the demo prompts do, by writing $threejs-towers at the start of your request. Describe the building and the result you want in plain terms. The skill is aimed at tasks like generating a tower procedurally and filming it assembling.
Be specific about the subject and the purpose. Say whether you want a castle keep or a five-tier pagoda, whether the build should be scrubbable, and whether you want orbit controls. The demo prompt asks for a standalone HTML document with a build of about four and a half seconds.
- Name the style: castle keep, five-tier pagoda, dome or spire.
- State the goal: construction study, title sequence, procedural landmark or hero object.
- Ask for controls: scrub the timeline, drag to orbit, switch style.
Use $threejs-towers to generate a tower procedurally and film it assembling behind a rising clip plane, with scaffolding standing above the line.What do you need before you run the output?
The skill assumes you already write or run Three.js code, and it assumes familiarity with WebGL concepts. Its output is a demo HTML page, so you need Three.js for the rendered output and either a browser or a Node-based dev setup that can run that HTML file.
The skill runs no scripts and makes no network calls, according to its listing. Its reference material is SKILL.md, plus a demo folder containing index.html and PROMPT.md.
- Three.js library for rendering.
- A browser or Node-based dev setup that can run demo/index.html.
- Basic WebGL knowledge to judge and debug the code.
- Files included: agents/openai.yaml, demo/index.html, demo/PROMPT.md and SKILL.md.
What should you check in the result?
Procedural buildings fail in predictable ways. The skill's checklist tells you what to look for. Orbit a full turn at ground level: missing walls usually mean inverted winding, and long bars flying out of faces usually mean a rotation sign error on face-mounted boxes.
Scrub the timeline slowly through every stage. The cap should stay inside the walls at every height. Then view the roof from directly above, since overshooting tiles and NaN panels only show from that angle.
- Missing walls: suspect winding first.
- Cap poking out at corners: the cap plan does not match the section.
- Roof disappearing: check for Math.pow on a negative base, which returns NaN.
- Glowing silhouette: emissive light is leaking through undecked openings.
What is the build animation, and how do you tune it?
Everything in the building exists from the first frame. A clipping plane facing down moves up, and every structural material clips against it. A cap mesh at the plane's height turns the hollow clipped shell into what reads as solid masonry. Scaffolding ignores the clip, so it always stands one stage ahead of the finished work.
The stage list gives each style a caption, an English label and a target height. The source recommends keeping the whole build short, around four to five seconds, so people will rebuild it repeatedly.
- Set renderer.localClippingEnabled to true before adding clipping planes.
- Set clipShadows on each clipped material so shadows do not build early.
- Give each style a list of stages with a caption and target height.
- Use a DoubleSide dark material for interiors to read as solid stone.
renderer.localClippingEnabled = true;
const CLIP = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0);What people use it for
- Architectural title sequences where a tower builds itself on screen.
- Construction studies that show masonry rising through scaffolding by stage.
- Procedural landmarks, such as a pagoda or dome, in a Three.js hero scene.
- Parameter-driven building styles, where a new style is a new table of levels.
Frequently asked questions
How do I install the threejs-towers skill?
Download the ZIP from the agent-skills directory page, then unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings, then Capabilities, then Skills.
Is the threejs-towers skill free?
The listing states the licence is MIT. The source does not mention pricing, so check the directory page for any details beyond the licence.
What do I need to run the output?
You need the Three.js library and a browser or Node-based dev setup that can run the demo HTML. The skill assumes you already understand WebGL concepts.
Does the skill run scripts or use the network?
According to the listing, it runs no scripts and uses no network. It contains SKILL.md, demo/index.html, demo/PROMPT.md and agents/openai.yaml.
Who should not use this skill?
Skip it if you need ready-made 3D models, if you do not write or run Three.js code, or if you need photorealistic or engineering-accurate structures. The approach is stylised and parametric.
Why does my roof disappear or my walls look inside out?
The source names two common causes. Math.pow with a negative base returns NaN, which makes the roof vanish, so clamp the value first. Inverted face winding causes missing walls, because back faces are culled.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use threejs-towers if you write Three.js and want buildings generated from parameters with a build animation that reads as construction. Pick a modelled-asset workflow or a photorealistic architecture tool instead if you need ready-made models or engineering-accurate structures.
Download the skill