img2threejs: 単一画像からオブジェクトをプロシージャルな Three.js コードに再構築するステージドスカルプティングパイプライン

何を解決するか

これは、単一の参照画像を高品質でアニメーション準備完了の 3D モデルに変換する難しさに対処します。重いメッシュファイルやフォトグラメトリを使用する代わりに、ウェブブラウザで直接レンダリングできる軽量なプロシージャルコードを生成します。

仕組み

このプロジェクトは、AI エージェント（Claude Code のように）が彫刻家として機能するステージドスカルプティングパイプラインを使用します。プロセスは次の厳格なシーケンスに従います：blockout、構造パス、形状の洗練、マテリアルパス、サーフェスパス、ライティングパス、インタラクションパス、最適化パス。各ステージは、参照画像に対して作業を検証する Python スクリプトによってゲートされます。エージェントは、次のステージに進む前に、サイドバイサイドレンダーとオリジナルを比較するビジュアルレビューに合格する必要があります。これにより、最終出力はプリミティブ、プロシージャルシェーダー、および生成されたジオメトリを使用してオブジェクトを構築する TypeScript ファクトリーになります。

対象者

• Game developers 軽量でコードベースの 3D アセットを探している方
• Web developers 大きなファイルダウンロード不要でアニメーション準備完了の Three.js モデルが必要な方
• AI engineers 3D アセット生成のためのエージェントベースのワークフローを構築している方

ハイライト

• Token-efficient design: 検証とブックキーピングに決定論的な Python スクリプトを使用し、ビジュアルジャッジメントのためだけに高コストな LLM トークンを予約します。
• Animation-ready: ピボット、ソケット、コライダーを含むランタイム階層を生成します。
• Procedural reconstruction: メッシュを抽出する代わりに、コード（プリミティブとシェーダー）からオブジェクトを再構築します。
• Agent-agnostic: スキルベースのアーキテクチャを介して、さまざまな AI コーディングツールとビジョンモデルで動作するように設計されています。