Repolode
Submit
lhlGitHub

lhlGitHub/threejs-architecture-effects

An Agent Skill that lets Codex, Claude Code or Cursor generate an orbitable Three.js architecture scene that assembles itself brick by brick.

View on GitHub
Stars
587
Forks
69
Open issues
0
Last commit
28 days ago

What is it?

This project is an Agent Skill that guides an AI coding agent to build an interactive 3D Chinese-style building with Three.js. The output is a runnable Vite + React + Three.js site where a solid miniature assembles itself over a single 0-to-1 timeline, so you can play, pause, scrub backward and replay construction. Parts include brick courses, timber frame, dougong brackets, layered eaves and clay tiles.

Materials such as brick, wood, plaster, tile, stone and bronze are generated procedurally rather than loaded from paid models. Orbit and zoom controls are included, along with detail cameras for eaves and stone lions. A scaffold script copies the bundled starter into a new directory without overwriting existing files, and the starter runs with npm ci and npm run dev in a WebGL2 browser.

The bundled clock tower is an example rather than a historical reconstruction. The skill is also meant for other designs, such as a two-storey pavilion, and video export is not included.

Key features

  • 01Generates a solid, orbitable Three.js building rather than a flat video
  • 02Construction is driven by one 0-1 timeline that supports play, pause, scrub and replay
  • 03Procedural PBR materials for brick, wood, plaster, tile, stone and bronze
  • 04Detail cameras for eave and stone lion close-ups
  • 05Scaffold script copies a Vite + React starter without overwriting existing folders

Use cases

  • Prompting an AI coding agent to produce a Chinese pavilion or building scene in Three.js
  • Building an interactive architecture showcase with storey-by-storey construction animation
  • Adapting the starter template into a different design, such as a lakeside pavilion

Quick start

  1. 1

    Clone the repository

    git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
  2. 2

    Scaffold a new project from the starter

    node threejs-architecture-effects/scripts/scaffold.mjs ./my-building
  3. 3

    Install dependencies and start the dev server

    npm ci && npm run dev

Things to know

  • Requires Node.js 22.13+ and a WebGL2-capable browser.
  • Desktop-oriented; the README does not claim smooth performance on all devices.
  • Video export is not included; the output is an interactive site.

Topics

#threejs#agent-skill#3d#webgl#procedural-generation#vite#react#creative-coding

FAQ

What is threejs-architecture-effects?
An Agent Skill that lets Codex, Claude Code or Cursor generate an orbitable Three.js architecture scene that assembles itself brick by brick. This project is an Agent Skill that guides an AI coding agent to build an interactive 3D Chinese-style building with Three.js. The output is a runnable Vite + React + Three.js site where a solid miniature assembles itself over a single 0-to-1 timeline, so you can play, pause, scrub backward and replay construction. Parts include brick courses, timber frame, dougong brackets, layered eaves and clay tiles.
Is threejs-architecture-effects free to use? What license does it have?
threejs-architecture-effects is open source under the MIT license. Check the license terms before using it in commercial products.
Is threejs-architecture-effects still maintained?
Actively maintained. The last commit to threejs-architecture-effects was on Sep 22, 2026.
What can I use threejs-architecture-effects for?
Prompting an AI coding agent to produce a Chinese pavilion or building scene in Three.js Building an interactive architecture showcase with storey-by-storey construction animation Adapting the starter template into a different design, such as a lakeside pavilion
How do I install threejs-architecture-effects?
Clone the repository: git clone https://github.com/lhlGitHub/threejs-architecture-effects.git Scaffold a new project from the starter: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building Install dependencies and start the dev server: npm ci && npm run dev
Where can I get threejs-architecture-effects?
The source code and installation instructions are on GitHub: https://github.com/lhlGitHub/threejs-architecture-effects

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects