threejs-architecture-effects README

The project's README from github.com/lhlGitHub/threejs-architecture-effects. As one markdown file: README.md.

threejs-architecture-effects

Portable Agent Skill by Hailey. It builds a real, orbitable Three.js building that assembles itself: brick courses, timber frame, dougong, layered eaves, procedural PBR materials, and close-up cameras.

中文：给 Codex / Claude Code / Cursor 用的开源 skill。输出是可运行的三维古建网站，不是贴图揭幕，也不需要 API key。

Brick-by-brick construction of a Chinese clock tower

Watch the full 20s demo →

Completed clock-tower miniature

GitHub README cannot play a repo .mp4 inline, so the motion preview is a GIF. Click it (or the link) to play the full video.

What you get

The bundled clock tower is a working example, not a historical reconstruction and not the only design this skill can make.

Install

Copy this folder into the agent skills directory, then start a new session:

Runner Path
Codex ~/.codex/skills/threejs-architecture-effects (or $CODEX_HOME/skills/)
Claude Code ~/.claude/skills/threejs-architecture-effects
Cursor ~/.cursor/skills/threejs-architecture-effects 
git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
cp -R threejs-architecture-effects ~/.cursor/skills/

Then ask:

Use $threejs-architecture-effects to make a Chinese pavilion like the starter: red walls, dark-green tiles, built storey by storey, orbitable, with eave close-ups.

Other useful prompts:

Run the starter without an agent

Needs Node.js 22.13+, npm, and a WebGL2 browser.

git clone https://github.com/lhlGitHub/threejs-architecture-effects.git
node threejs-architecture-effects/scripts/scaffold.mjs ./my-building
cd my-building
npm ci
npm run dev

The scaffold copies assets/starter/ into a new directory and refuses to overwrite an existing one. It does not install packages or start a server.

Controls: drag to orbit, scroll to zoom, timeline to scrub, 飞檐细赏 / 石狮近观 for close-ups.

How construction works

  1. Write an assembly plan: foundations → frame → masonry → decks → upper walls → brackets / eaves / tiles → ornament.
  2. Model the finished silhouette first so parts share dimensions and nothing floats.
  3. Give every solid piece a start, duration, and travel. Color and shadow shaders share one progress value, so seeking is deterministic.
  4. Author materials separately (color, roughness, micro-height). Do not hide crude joints with fog or bloom.

Details for agents: SKILL.md, construction principles, template map, verification.

Layout

threejs-architecture-effects/
├── SKILL.md                 Agent entry
├── LICENSE                  MIT, Copyright (c) 2026 Hailey
├── agents/openai.yaml       Codex UI metadata
├── scripts/scaffold.mjs     Copy the starter into a new project
├── references/              Construction, template map, verification
├── assets/preview.gif       README motion preview
├── assets/preview.png       README still
├── assets/preview.mp4       Full screen recording
└── assets/starter/          Vite + React + Three.js miniature

Limits

License

MIT. Copyright (c) 2026 Hailey. See LICENSE.

threejs-architecture-effects (lhlGitHub/threejs-architecture-effects)

Searching Database…

585 ·GitHub
Threejs-architecture-effects
这是什么？这是一个面向 Codex、Claude Code 和 Cursor 的 Agent Skill，能构建一座真实的、可环绕观察的 Three.js 建筑，并让它沿时间线自行组装——包括砖墙层、木构架、斗拱、层叠屋檐和程序化 PBR 材质——无需付费 3D 模型或 API 密钥。
这是一个 3D 模型文件，还是一个可运行的网站？它是一个 Vite + React + Three.js 起始项目：技能生成可运行的代码，产出一个真正可交互的 3D 网站，而不是现成的模型，也不是在平面上播放的视频。
怎么在我的编程智能体中使用它？把技能文件夹复制到你智能体的技能目录——Codex 用 ~/.codex/skills/threejs-architecture-effects，Claude Code 用 ~/.claude/skills/threejs-architecture-effects，Cursor 用 ~/.cursor/skills/threejs-architecture-effects——然后开启一个新会话，让它构建类似起始项目的东西。
我需要 Node.js 或 API 密钥吗？运行生成的网站需要 Node.js 22.13+、npm 以及支持 WebGL2 的浏览器；不需要 API 密钥或付费模型服务。
它做不到什么？它只使用程序化几何体和材质——起始项目不含付费模型服务，也没有背景音乐——不支持视频导出，面向桌面端，并且不承诺达到博物馆级的精确度或在每台机器上都有 60 FPS。
自带的钟楼示例是什么？一个可运行的演示建筑，采用中式钟楼造型，有红墙、瓦檐，以及针对屋檐和石狮子的特写镜头。它只是一个可运行的示例，既不是历史复原，也不是该技能能产出的唯一设计。
自组装时间线是怎么工作的？每个构件都有一个由共享的 0 到 1 进度值驱动的开始时间、时长和运动路径，因此颜色和阴影着色器保持同步，你可以确定性地播放、暂停、回退或重放建造过程。
我能自定义设计吗？比如不做塔，改做亭子？可以，README 里展示了诸如把模板改造成没有时钟和石狮子的两层湖畔亭子之类的提示词——你描述想要什么建筑，智能体就会相应调整材质和组装顺序。
What are similar projects?natural-disasters, img2threejs, guizang-product-video-skill, procedural-film, qwen21-nsfw-pose-skill, LinearAbilityExtThreeJS, genart-skill, sylva
Which topics is it in?cursor-skills, 3d-graphics, procedural-generation, generative-art, creative-coding, threejs, codex-skill, webgl, claude-code-skill, rendering, agent-skill, claude-skills
Creator
lhlGitHub
Size
64.7 MB
Stars
585
Updated
CommitSep 22
Age
27d
Commits · 90 Days