lhlGitHub/threejs-architecture-effects

これは何？

主な機能

• 01平面的な動画ではなく、立体的で視点を回せるThree.jsの建物を生成
• 02再生、一時停止、スクラブ、リプレイに対応する0〜1の単一タイムラインで建築工程を制御
• 03レンガ、木材、漆喰、瓦、石、青銅のプロシージャルPBR素材
• 04軒や石獅子をクローズアップするためのカメラ
• 05既存のフォルダを上書きせずにVite + Reactのスターターをコピーするscaffoldスクリプト

ユースケース

• AIコーディングエージェントに、中国風の楼閣や建物のThree.jsシーンを生成させる
• 階ごとに組み上がるアニメーションを備えた、インタラクティブな建築物のショーケースを作る
• スターターテンプレートを、湖畔の楼閣など別のデザインに応用する

クイックスタート

1. 1

   リポジトリをクローンする

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

   スターターから新しいプロジェクトを作成する

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

   依存関係をインストールして開発サーバーを起動する

   npm ci && npm run dev

使う前に知っておきたいこと

• !Node.js 22.13以降とWebGL2対応ブラウザーが必要です。
• !デスクトップ向けです。READMEでは、すべてのデバイスでスムーズに動作するとは記載されていません。
• !動画の書き出しには対応していません。出力されるのはインタラクティブなサイトです。

トピック

よくある質問

threejs-architecture-effects とは？

Codex、Claude Code、Cursorで、組み上がる様子を再生でき、視点を回せるThree.jsの建築シーンを生成するAgent Skillです。 このプロジェクトは、AIコーディングエージェントがThree.jsで中国様式の建物をインタラクティブな3Dシーンとして構築できるよう支援するAgent Skillです。出力されるのは、Vite + React + Three.jsで動作するサイトです。建物のミニチュアが0〜1の単一タイムラインに沿って組み上がるため、再生、一時停止、巻き戻し、建築工程の再生ができます。構成パーツには、レンガの段、木造の骨組み、斗栱、幾重にも重なる軒、粘土瓦が含まれます。

threejs-architecture-effects は無料で使えますか？ライセンスは？

threejs-architecture-effects は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

threejs-architecture-effects は今もメンテナンスされていますか？

活発にメンテナンス中。threejs-architecture-effects の最終コミットは 2026年9月22日 です。

threejs-architecture-effects は何に使えますか？

AIコーディングエージェントに、中国風の楼閣や建物のThree.jsシーンを生成させる 階ごとに組み上がるアニメーションを備えた、インタラクティブな建築物のショーケースを作る スターターテンプレートを、湖畔の楼閣など別のデザインに応用する

threejs-architecture-effects のインストール方法は？

リポジトリをクローンする: git clone https://github.com/lhlGitHub/threejs-architecture-effects.git スターターから新しいプロジェクトを作成する: node threejs-architecture-effects/scripts/scaffold.mjs ./my-building 依存関係をインストールして開発サーバーを起動する: npm ci && npm run dev

threejs-architecture-effects はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/lhlGitHub/threejs-architecture-effects