img2threejs｜1枚の画像から高品質なThree.jsモデルを生成

ポイント

• 1枚の画像からThree.jsのTypeScriptコードを直接生成
• 決定論的スクリプトによる処理でAIトークンを大幅削減
• アニメーションに適した関節やコライダーの階層構造を自動付与

概要・解決する課題

従来のimage-to-3Dツールは、重い3Dメッシュファイルや点群データを生成するため、読み込みコストが高くコード側での微調整やアニメーション化が困難でした。img2threejsは、1枚の参照画像から、プリミティブや手続き型シェーダーからなるThree.jsのファクトリコードを直接組み立てます。生成されたコードはランタイム階層構造（関節やコライダー、ソケット等）を持っており、そのままブラウザ上で動かせます。

ただし、1枚の参照画像だけでは完全に細部を再現することは難しく、キャラクターなどでは複数アングルの追加データを求められる場合があります。また、現在は1名のコントリビューターによって開発されています。

なぜ注目されているか

AIエージェントに3D生成を指示する際、コード全体の再読み込みやバリデーションをLLMに任せるとトークンコストが膨大になります。img2threejsは、画像の検証やPBR素材情報の抽出といった固定の機械的作業を決定論的なPythonスクリプトにすべて委ね、AIには「最終画像を見て合否を判定する」という視覚的判断だけにトークンを集中させる仕組みを採用しています。

主なユースケース

• Web向けの軽量アセット作成 重いバイナリファイルをダウンロードせず、TypeScriptコードだけでブラウザ上に3Dオブジェクトを描画・制御したい場面に最適です。
• プログラム制御可能な3D開発 ただの動かない立体物ではなく、扉の開閉、キャラクターの関節可動など、プログラムで後から操作できる階層型アセットを素早く構築したい場合。

動作環境

• Python3.10以上の標準ライブラリ（pipインストールや外部依存パッケージは一切不要です）
• Claude CodeなどのAIエージェント環境（エージェントが提供するビジョン機能を利用します）

git clone https://github.com/hoainho/img2threejs.git ~/.claude/skills/img2threejs

/img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.

こんな人におすすめ

• Webフロントエンドで動作する軽量な3Dオブジェクトを短時間で実装したい開発者
• バイナリファイルではなく、Git管理や修正が容易なコードベースの手続き型3Dモデルを求める方
• AIエージェントを活用したアセット生成において、LLMのトークン消費量を極限まで抑えたい方