Three.js architecture effects guide

Chapter 1 · Scaffold first: see a tower that can grow

Plain talk: some demos glue a photo on cardboard; this Skill wants real parts assembling on a shared build clock—and you can scrub backward.

This chapter: install → scaffold → orbit once and scrub build progress.

Free package; need Node.js 22.13+, npm, WebGL2 browser. No API key.

---

Where people get stuck

1. Node too old;
2. Target folder already exists → scaffold refuses;
3. Page loads but they never scrub progress and think it’s broken.

---

1. Install the Skill

1. SkillBazaar → free download “Three.js architecture effects.”
2. Unzip to skills; confirm SKILL.md, scripts/scaffold.mjs, assets/starter/, references/.
3. New chat; @threejs-architecture-effects if needed.

---

2. Minimal commands

node ~/.cursor/skills/threejs-architecture-effects/scripts/scaffold.mjs ./my-building
cd ./my-building
npm ci
npm run dev

Notes: existing target dir is rejected; scaffold only copies starter—it won’t npm install or start the server for you.

---

3. Checklist

• Dev URL opens; you can orbit (including back / under eaves)
• Build 0→1 plays; pause/scrub works; scrub again still correct
• Finished look isn’t “whole-floor scale” or “alpha fade walls”
• Starter is a reference, not a museum mandate

Scroll down for construction semantics, custom simple buildings, verification & stats.