lhlGitHub/threejs-architecture-effects

What it solves

This project provides a portable "Agent Skill" that enables AI agents (like Codex, Claude Code, or Cursor) to generate interactive, 3D architectural miniatures that assemble themselves in real-time. It removes the need for pre-made 3D models or API keys, allowing agents to programmatically create complex structures like Chinese pavilions using code.

How it works

The system uses a Vite, React, and Three.js starter kit. It follows a specific construction logic where the agent writes an assembly plan (foundations to ornaments) and models the final silhouette first to ensure alignment. Every 3D piece is assigned a start time, duration, and travel path, all driven by a single 0–1 timeline that allows the user to play, pause, or scrub through the construction process. Materials are generated procedurally (brick, wood, stone, etc.) rather than using external textures.

Who it–s for

Developers and AI agent users who want to generate orbitable, interactive 3D architectural visualizations without manually modeling assets in 3D software.

Highlights

• Self-Assembling Geometry: Buildings are constructed brick-by-brick and layer-by-layer via a controllable timeline.
• Procedural Materials: Includes built-in logic for wood, plaster, tile, and bronze without requiring paid models.
• Interactive Controls: Supports orbiting, zooming, and dedicated close-up cameras for architectural details.
• Agent-Ready: Specifically designed to be dropped into the skills directories of AI coding agents for immediate use.