ヘビーメッシュやニューラルネットワーク不要：画像をクリーンなThree.jsコードに変換する方法

画像から3Dを生成するツールの多くは重いバイナリを出力します。結果は数十万ポリゴンの密集したメッシュ、ベイクされたテクスチャの滲み、そしてコードで直接微調整する手段がありません。Webサイトのインタラクティブ性やブラウザでの軽量なシーンが必要なだけであれば、1つのオブジェクトのために5MBのGLTFファイルを読み込みたくはないでしょう。

img2threejsプロジェクトは異なる角度からこの問題に取り組みました。フォトグラメトリやポリゴンメッシュのエクスポートではなく、画像を分析してThree.js用の手続き型TypeScriptコードを生成します。モデルは実行時に基本プリミティブ、シャーダー、数式曲線から組み立てられます。

内部構造

核となるコンセプトはシンプルです：生成されるモデルは重いバイナリアセットではなく、ソースコードであるべきです。スクリプトに写真またはアートワークを1枚入力すると、標準的なObject3Dを返すファクトリ関数MeshFactoryが返ってきますMeshFactory。

このオブジェクト内では、ノード階層がすでに定義されています：

• アイテムをアタッチするための回転ポイント（ピボット）とソケット。
• クリック処理や物理演算用のコライダー。
• 継続的なバックグラウンドアニメーション用のupdateメソッド。
• シーンのライティングに応答し、ベイクされていない手続き型マテリアル。

コードは明確なレイヤーに整理されています。エディターで開いて、フィルレット半径の調整、金属の粗さの変更、数分でアニメーションロジックを書き換えることができます。

なぜLLMはトークン消費で狂わないのか

画像に基づいてゼロからThree.jsシーンを描写するよう言語モデルに強制すると、座標を闇雲に推測しようとしてコンテキスト全体をすぐに使い果たします。img2threejsの創業者たちは、決定論的スクリプトとClaude CodeやCodecodeのようなニューラルネットワークビジョンエージェントに作業を分担しました。

すべてのルーティン作業は、依存関係ゼロの純粋なPython 3.10によるローカルパイプラインにオフロードされます。PillowやPyTorchのような重いライブラリは不要です：PNG解析とカラー計算は標準モジュールstructとcolorsysを通じて動作します。

スクリプトはメカニクス部分を処理します：

• リファレンスをマテリアルゾーンにスライスし、CIEDE2000公式を使用してカラーパレットを分析する。
• 中間オブジェクト仕様ObjectSpecを構築する。
• 説明に重要な要素が欠けている場合、コンポーネント寸法とブロックアセンブリを検証し、コード生成までブロックする。
• 比較チェックリスト（元と現在のレンダリングを並列表示）をアセンブルする。

モデルはトークンを意思決定のみに使用します：レンダリング画像と照合して、現在のステップが検証に合格したか、ジオメトリの調整が必要かを判断します。

アセンブリは厳密な段階に従います：粗い下書きから構造へ、そして形態、マテリアル、ライティング、最終最適化へと進みます。モデルがテクスチャで描くべきものを不正に描こうとした場合、内部検証はパスを拒否し、コードを修正のために返します。

実際のシステム機能

リポジトリにはブラウザで各オブジェクトを回転させ、生成されたTypeScriptコードをすぐに表示できるライブデモのあるギャラリーがあります。

デモにはCS2の詳細な武器スキンバリュート、BMXバイク、充電ケースに入ったイヤフォン、等尺投影の家ディオラマが含まれています。このツールはハードサーフェスオブジェクトに特に優れています。小さなベベル、ねじの切り欠き、パネルジョイント、マットプラスチックからグロスへの移行が高精度でプリミティブに分解されます。

別の生成ブランチがキャラクターや動物向けに設計されています。スクリプトは顔のアナトミーのアンカーポイントと体のプロポーションをマークし、シルエットの認識可能性を維持しようとします。ただし、出力でフォトリアリスティックな人間のスキャンを期待すべきではありません。

実行と試用方法

最も速い統合方法は、プロジェクトをClaude CodeまたはCodecodeのスキルとして追加することです。リポジトリをエージェントの作業フォルダーにクローンするだけです：

その後、エージェントチャットで画像を添付して次のコマンドを呼び出すことができます：

ターミナルから手動でステップを実行したい場合は、スクリプトをforgeディレクトリから直接起動します：

出力には、準備完了のmesh.tsファイルと、すべてのビルドパラメータを含むJSONマニフェストが得られます。

正直な限界

プロジェクト авторыは適用範囲の境界について率直です。単一の写真からは、オブジェクトの隠れた側面を100%再構築することは不可能です。参照にアイテムの裏面が映っていない場合、システムは前面的ジオメトリをミラーするか、慎重な推測を行い、その領域を低詳細としてマークします。

このツールは、リグを含む複雑なAAAキャラクターを作成するためのプロフェッショナルな3Dモデラーを置き換えるものではありません。そのニッチは、バンドル重量ゼロと完全なコード可読性が重要なインタラクティブアイテム、環境、ウィジェット、ディオラマの迅速な生成です。

まとめ

このプロジェクトは、Three.jsを使用しているWeb開発者やインディーゲームクリエイターにとって、ぜひブックマークする価値があります。立方体や円柱からシンプルな3Dアセットを手動で組み立てたり、ランディングページで重いメッシュを読み込んだりに厌倦しているなら、img2threejsのアプローチはルーティン作業を何時間も節約してくれます。型安全なフロントエンドに完璧に適合する軽量で拡張可能なコードが得られます。