skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-towers

Generates procedural Three.js architecture and animates it assembling behind a rising clipping plane.

5.7k|685|Updated Feb 3, 2026
Search Tags:#Three.js#ARCHITECTURE#Animation#3d modeling#procedural generation#webGL#clipping plane
One-click install
npx skills add https://github.com/MengTo/Skills --skill threejs-towers
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-towers
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/threejs-towers
Command: npx skills add https://github.com/MengTo/Skills --skill threejs-towers

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes assets (resource) components.

What problem does it solve?

Building convincing 3D architecture in Three.js usually means importing mesh files or hand-writing repetitive geometry, and animating a construction sequence typically requires complex per-part timelines. This Skill provides a small procedural geometry vocabulary and a single clipping-plane technique so towers, pagodas, domes, and spires are generated from parameters and film themselves assembling.

Core Features & Use Cases

  • Procedural geometry vocabulary: Ten small builders (face, box, n-gon prism, swept plan, lathe, tube) that append into shared vertex arrays, so each architectural style is one assembly function plus a parameter table, merged by material for low draw-call counts.
  • Parametric hip roofs: One roof function driven by six parameters (lift, tip, flare, pow, trunc, ridge) produces East Asian flying-eave roofs, with clamping to avoid NaN from overshooting tiles.
  • Clipping-plane build animation: A single rising THREE.Plane clips all structural materials while scaffolding ignores it, with a plan-matched cap mesh turning hollow clipped sections into solid masonry courses.
  • Use Case: Create an architectural title sequence where a castle keep or five-tier pagoda assembles in about four seconds, with stage captions, a percentage readout, orbit controls, and a scrubbable timeline.

Quick Start

Use the threejs-towers skill to generate a procedural tower in Three.js and animate it assembling behind a rising clip plane with scaffolding standing above the finished work.

Frequently Asked Questions about threejs-towers

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a building assembling itself in Three.js?▼

Use a single THREE.Plane facing downward that travels upward, and assign it to clippingPlanes on every structural material with clipShadows enabled. Add a cap mesh at the plane's height scaled to the footprint so the clipped hollow shell reads as solid masonry.

How do I generate procedural architecture in Three.js without mesh files?▼

Write a small vocabulary of builders — face, box, n-gon prism, swept plan, and lathe — that append into shared vertex, normal, UV, and index arrays. Each architectural style then becomes one assembly function plus a table of level parameters.

Why does my Three.js roof geometry disappear or render as NaN?▼

Math.pow with a negative base and fractional exponent returns NaN, which happens when roof tiles overshoot the eave and push the curve parameter past 1. Clamp the parameter with Math.min(1, t) and handle the overshoot as a separate linear term.

Why are my Three.js prism faces invisible from outside?▼

Invisible faces are almost always a winding-order problem: a prism whose side faces are wound inward gets back-face culled, so you see the inside of the far wall. Get one prism's vertex order right and copy it everywhere.

How do I reduce draw calls for procedural Three.js buildings?▼

Merge geometry by material rather than by part, appending all parts sharing a material into one BufferGeometry. Six buildings can render in 11 to 18 draw calls, which is the difference between 120fps and 30fps.

Why do my Three.js box textures look stretched or plastic?▼

BoxGeometry gives every face 0..1 UVs regardless of size, so a long pole and a short brace share the same grain. Rewrite the UVs in world units per face before upload, scaling by each face's real dimensions.

Related Skills

Explore More Design & Creative Skills→
kayroalexandrekayroalexandre

design-image-prompt-engineer

Translate photography concepts into detailed AI image generation prompts.

Community
Advanced
trungdo9trungdo9
3

threejs

Build 3D web applications with Three.js scenes, cameras, and animations.

Community
Advanced
cfongaicfongai
23

seedance-fight-scenes

Generate detailed video prompts for epic fight scenes with combat styles, camera techniques, and sound design.

Community
Advanced
lioenskylioensky
2.2k

shader-dev

Create real-time visual effects with GLSL shader techniques.

Community
Advanced