img2threejs/img2threejs

img2threejs – 単一の参照画像からプロシージャルな Three‑js モデルを作成する

概要

• 大規模言語モデル (Claude, Codex, etc.) が、オブジェクトやキャラクターの単一の写真を読み込み、プリミティブ、プロシージャル・シェーダー、および生成されたジオメトリのみを使用して Three.js で同じものを構築する TypeScript code を出力するスキル形式のライブラリです。出力は、アニメーションの準備が整った THREE.Group ファクトリであり、メッシュファイルやダウンロードは不要です。

仕組み

1. Intake – 画像が LLM (または任意の "agent‑vision" ツール) に入力されます。モデルは対象 (object, character, …) を分類し、アイデンティティを定義する特徴 (ベベル、ネジ、摩耗、色など) の detail inventory を構築します。
2. Spec generation – 決定論的な Python スクリプト (forge/state.py) が証拠のチェックリストを記録し、ジオメトリ、マテリアル、および階層構造を記述する JSON spec を作成します。
3. Code synthesis – LLM は、Three.js プリミティブ、カスタムシェーダー、およびオプションで voxel-carved シルエットを使用して spec を再現する TypeScript ファクトリを生成します。
4. Vision‑review loop – 各パス (blockout → structural → material → surface …) の後、レンダリング結果が参照画像と比較されます。不足している詳細ブロックが、ゲートが満たされるまで進められます。
5. Runtime output – 最終的なコードはブラウザで実行され、ピボット、ソケット、および userData を公開して、モデルをすぐにアニメーション化できるようにします。

主な特徴

• Token‑efficient: LLM トークンを消費するのは視覚的な判断とコード生成のみであり、重い処理は決定論的な Python バリデーションによって行われます。
• Domain plugins: プラグイン・システム (plugin‑cs2, plugin‑character, plugin‑img2glb, …) により、特定の資産クラスに対して専門的なチェックリストと再構築ルールが追加されます。
• Quality gates: すべての詳細が実際のコンポーネントにマッピングされる必要があります。パイプラインは、隠れたジオメトリを「作り出す」ことを拒否します。
• Multi‑view silhouette carving (オプション) – 複数のビューが提供された場合、voxel-based ハル (hull) のためのもの。
• Live demo gallery: 公開サイトで、ソースコードへのリンク付きで数十の生成されたモデルを表示しています。

典型的なユースケース

• コンセプトアートから、軽量でアニメーション可能な Three.js モデルを必要とするゲーム・アセット・パイプライン。
• 重いメッシュをエクスポートせずに、3D UI 要素や製品の可視化を迅速にプロトタイプ化すること。
• プロシージャル・ジオメトリがどのように現実世界のオブジェクトを近似できるかを示す教育的デモ。
• AI エージェント (Claude Code, Codex, OpenCode) に「このオブジェクトを再構築する」機能を追加すること。

はじめに

# Claude/Codex のスキルディレクトリにスキルをクローンします
git clone https://github.com/img2threejs/img2threejs.git ~/.claude/skills/img2threejs

# (オプション) プラグイン・ハーネスとドメイン・プラグインをインストールします
npx github:img2threejs/img2 install          # ~/.img2 を作成し、`img2` ランチャーを起動します
img2 add img2threejs/plugin-cs2               # CS2 weapon‑skin ルール
img2 add img2threejs/plugin-character         # animated‑character パイプライン

スキルの実行 (Claude Code またはスキルを呼び出せる任意の LLM の内部で):

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

スキルは次のように行います:

1. 添付された画像を分析し、
2. ステップバイステップの spec を作成し、
3. TypeScript ファクトリを生成し、
4. 元の参照画像と並べて表示されるライブ・プレビューを表示します。

高度な制御 – プロンプトに明示的な制約を埋め込むことで、ゲートを制御できます。例:

/img2threejs Rebuild the subject in this image as a procedural Three.js model.
Fidelity   Hold proportions and silhouette, enumerate bevels, seams, fasteners, wear.
Materials  Derive finish and gradient stops from the pixels, flag colours that won’t tone‑map.
Runtime    Expose pivots and sockets for moving parts. 

各行は、パイプライン内の実際のバリデーション・ゲートにマッピングされます。

詳細については

• ライブ・デモ・ギャラリー: https://img2threejs.io/ (各デモは生成されたソースにリンクしています)。
• Showcase レポ: https://github.com/img2threejs/img2threejs-showcase.
• アーキテクチャの詳細: リポジトリ内の docs/ARCHITECTURE.md。

ライセンス & コミュニティ

• Apache 2.0.
• 貢献は歓迎されます (see CONTRIBUTING.md)。
• Atlas Cloud, Tripo, Hyper3D, および Ko-fi ページによってスポンサーされています。

---

要約すると、img2threejs は、決定論的なバリデーションと拡張可能なドメイン・プラグインに重点を重置した、単一の写真を一清、アニメーション可能な Three.js コードに変換する AI 拡張パイプラインです。