What is this?
This is an Agent Skill for Codex, Claude Code, and Cursor that builds a real, orbitable Three.js building which assembles itself on a timeline — brick courses, timber frame, dougong brackets, layered eaves, and procedural PBR materials — without needing a paid 3D model or an API key.
This is an Agent Skill for Codex, Claude Code, and Cursor that builds a real, orbitable Three.js building which assembles itself on a timeline — brick courses, timber frame, dougong brackets, layered eaves, and procedural PBR materials — without needing a paid 3D model or an API key.Is this a 3D model file or a running website?It is a Vite + React + Three.js starter project: the skill generates runnable code that produces an actual interactive 3D site, not a pre-made model or a video played on a flat plane.
It is a Vite + React + Three.js starter project: the skill generates runnable code that produces an actual interactive 3D site, not a pre-made model or a video played on a flat plane.How do I use it with my coding agent?Copy the skill folder into your agent's skills directory — ~/.codex/skills/threejs-architecture-effects for Codex, ~/.claude/skills/threejs-architecture-effects for Claude Code, or ~/.cursor/skills/threejs-architecture-effects for Cursor — then start a new session and ask it to build something like the starter.
Copy the skill folder into your agent's skills directory — ~/.codex/skills/threejs-architecture-effects for Codex, ~/.claude/skills/threejs-architecture-effects for Claude Code, or ~/.cursor/skills/threejs-architecture-effects for Cursor — then start a new session and ask it to build something like the starter.Do I need Node.js or an API key?You need Node.js 22.13+, npm, and a WebGL2-capable browser to run the generated site; no API key or paid model service is required.
You need Node.js 22.13+, npm, and a WebGL2-capable browser to run the generated site; no API key or paid model service is required.What can't it do?It only uses procedural geometry and materials — no paid model service and no background music in the starter — has no video export, is desktop-oriented, and doesn't promise museum-grade accuracy or 60 FPS on every machine.
It only uses procedural geometry and materials — no paid model service and no background music in the starter — has no video export, is desktop-oriented, and doesn't promise museum-grade accuracy or 60 FPS on every machine.What is the bundled clock tower example?A working demo building styled as a Chinese clock tower with red walls, tiled eaves, and close-up cameras for the eaves and stone lions. It's a working example, not a historical reconstruction or the only design the skill can produce.
A working demo building styled as a Chinese clock tower with red walls, tiled eaves, and close-up cameras for the eaves and stone lions. It's a working example, not a historical reconstruction or the only design the skill can produce.How does the self-assembly timeline work?Every piece gets a start time, duration, and travel path driven by one shared 0-1 progress value, so color and shadow shaders stay in sync and you can play, pause, scrub backward, or replay construction deterministically.
Every piece gets a start time, duration, and travel path driven by one shared 0-1 progress value, so color and shadow shaders stay in sync and you can play, pause, scrub backward, or replay construction deterministically.Can I customize the design, like making a pavilion instead of a tower?Yes, the README shows prompts like turning the template into a two-storey lakeside pavilion without clocks or lions — you describe the building you want and the agent reshapes materials and assembly order accordingly.
Yes, the README shows prompts like turning the template into a two-storey lakeside pavilion without clocks or lions — you describe the building you want and the agent reshapes materials and assembly order accordingly.What are similar projects?natural-disasters, img2threejs, guizang-product-video-skill, procedural-film, qwen21-nsfw-pose-skill, LinearAbilityExtThreeJS, genart-skill, sylva
natural-disasters, img2threejs, guizang-product-video-skill, procedural-film, qwen21-nsfw-pose-skill, LinearAbilityExtThreeJS, genart-skill, sylvaWhich 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
cursor-skills, 3d-graphics, procedural-generation, generative-art, creative-coding, threejs, codex-skill, webgl, claude-code-skill, rendering, agent-skill, claude-skills