1枚の画像から、メッシュファイルではなく、アニメーション対応のThree.js用TypeScriptコードでオブジェクトを再構築します。
iamlukethedev/Claw3D
OpenClaw、Hermes、またはカスタムランタイム上で動くAIエージェントを見守り、操作できるセルフホスト型の3Dバーチャルオフィス。
- スター
- 2,359
- フォーク
- 644
- 未解決の Issue
- 50
- 最終コミット
- 2 か月前
これは何?
Claw3Dは、自前のインフラで動かすAIエージェント向けの3Dワークスペースです。ログやダッシュボードでエージェントの活動を追う代わりに、エージェントが共有空間を動き回る様子を確認できる、リアルタイムの3Dオフィスを開きます。そこからエージェントとチャットしたり、状態を確認したり、承認やセッションを管理したりできます。
Claw3Dは可視化と操作のためのレイヤーであり、エージェントランタイムそのものではありません。ゲートウェイ経由でOpenClawに、同梱のWebSocketアダプター経由でHermesに接続できるほか、HTTPエンドポイントを直接公開する任意のオーケストレーターや、実際のエージェントフレームワークなしでオフィスを試せる組み込みのデモゲートウェイにも接続できます。StudioサーバーがWebSocket通信をプロキシするため、ブラウザーはStudioとのみ通信します。
フロントエンドはNext.js、React、TypeScriptで構築されており、3DオフィスにはThree.jsとReact Three Fiber、オフィスのレイアウトビルダーにはPhaserを使用しています。
主な機能
- 01エージェントが動き回り、活動状況を表示するリアルタイム3Dオフィス
- 02エージェントとのチャット、フリート管理、承認、セッション操作
- 03レイアウトを編集・公開できるオフィスレイアウトビルダー
- 04OpenClaw、Hermes、カスタムHTTPランタイム、またはデモゲートウェイに接続
- 05公開環境向けのアクセストークン保護と接続先ホストの許可リスト
ユースケース
- AIエージェントのチームがコードレビューやQAパイプラインを実行する様子を一画面で確認する
- 組み込みのデモゲートウェイを使って、エージェントの動作を視覚的にデモする
- TailscaleまたはSSHトンネル経由で、リモートのエージェント環境に接続する
クイックスタート
- 1
npmで依存関係をインストールします(Node.js 20以降を推奨)
npm install - 2
環境設定ファイルのサンプルをコピーします
cp .env.example .env - 3
Studioの開発サーバーを起動し、http://localhost:3000 を開いてゲートウェイに接続します
npm run dev
使う前に知っておきたいこと
- ライブエージェントを表示するには、別途起動したOpenClaw、Hermes、カスタムランタイム、または同梱のデモゲートウェイが必要です。
- これは非公式のコミュニティプロジェクトであり、OpenClawチームとは無関係です。
収録されている特集
トピック
よくある質問
- Claw3D とは?
- OpenClaw、Hermes、またはカスタムランタイム上で動くAIエージェントを見守り、操作できるセルフホスト型の3Dバーチャルオフィス。 Claw3Dは、自前のインフラで動かすAIエージェント向けの3Dワークスペースです。ログやダッシュボードでエージェントの活動を追う代わりに、エージェントが共有空間を動き回る様子を確認できる、リアルタイムの3Dオフィスを開きます。そこからエージェントとチャットしたり、状態を確認したり、承認やセッションを管理したりできます。
- Claw3D は無料で使えますか?ライセンスは?
- Claw3D は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- Claw3D は今もメンテナンスされていますか?
- 半年以内に更新あり。Claw3D の最終コミットは 2026年8月21日 です。
- Claw3D は何に使えますか?
- AIエージェントのチームがコードレビューやQAパイプラインを実行する様子を一画面で確認する 組み込みのデモゲートウェイを使って、エージェントの動作を視覚的にデモする TailscaleまたはSSHトンネル経由で、リモートのエージェント環境に接続する
- Claw3D のインストール方法は?
- npmで依存関係をインストールします(Node.js 20以降を推奨): npm install 環境設定ファイルのサンプルをコピーします: cp .env.example .env Studioの開発サーバーを起動し、http://localhost:3000 を開いてゲートウェイに接続します: npm run dev
- Claw3D はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/iamlukethedev/Claw3D
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Three.jsやGSAPなどのWeb 3D・アニメーション技術をClaude Codeに教えるスキルとプラグイン集。
シーンのブロッキング、キャラクターのポージング、カメラワークの編集を行い、AI動画モデルにショットを送れるブラウザベースのプリビズスタジオ。
映像スタイルごとのClaude Codeスキル集。全フレームと音楽トラックをコードで生成して動画を制作します。
ゲーム制作の作業を振り分けるディレクタースキルを含む、Three.js製ブラウザーゲーム向けのCodex・Claude Code用エージェントスキル9種。
幼児と大人が陸・海・空の先史時代の動物を探検できる、無料のバイリンガル3Dブラウザ博物館。