Repo-lab
クリエイティブ

img2threejs とは？画像1枚からThree.js 3Dモデルを自動生成するAIスキル

⭐ 4,276 stars GitHub →

img2threejs とは？画像1枚からThree.js 3Dモデルを自動生成するAIスキル

img2threesjは参照画像1枚からThree.jsのプロシージャル3Dモデルを自動生成するAIエージェントスキルです。フォトグラメトリーやメッシュ抽出を使わず、プリミティブとシェーダーのコードのみで忠実な3D再現を実現します。Claude Code上でスキルとして動作し、アニメーション対応の階層構造モデルをTypeScriptで出力します。

GitHubで急上昇中の img2threejs/img2threejs をご紹介します。 スター数 4276★ を獲得し、クリエイティブ分野で注目されているツールです。

img2threejs とは？Three.js 3Dモデル自動生成ツールの全貌

img2threesjは、参照画像1枚を入力としてThree.jsのTypeScriptファクトリーコードを生成するAIエージェントスキルです。3Dスキャンや写真測量（フォトグラメトリー）を使わず、プリミティブ・プロシージャルシェーダー・ジオメトリ生成のみで物体を再構築します。

品質ゲート付き段階的パイプライン（ブロックアウト→構造→素材→サーフェス→ライティング→インタラクション→最適化）で精度を担保し、アニメーション対応のランタイム階層（ピボット・ソケット・コライダー・破壊グループ）を出力します。2026年7月にリリースされたv1.3では、CIEDE2000カラーメトリクスが追加され、色の知覚的精度が大幅に向上しました。コントリビューター1名ながら活発に開発が続けられており、GitHubトレンドで急上昇中のプロジェクトです。

こんな人におすすめ:

  • エンジニア向け: Three.jsを使うWebエンジニア・ゲーム開発者が製品内3Dモデルプロトタイプを高速生成するために活用。Claude Code上で/img2threejsスキルを実行し、TypeScriptコードを直接プロジェクトに組み込める。
  • 非エンジニア向け: プログラミング知識が必要なため、エンジニア専用ツールです

img2threejs の主な機能・特徴

プロシージャル3D生成パイプライン

img2threesjの中核は、エージェントのビジョン（視覚判断）を唯一の品質審査者とする段階的彫刻パイプラインです。各パスは前のパスのレビューが通過してから解除されます。

  • 参照画像1枚からThree.jsプロシージャル3Dモデルコードを自動生成する
  • 品質ゲート付き8段階彫刻パイプラインで精度を段階的に高める
  • アニメーション対応のランタイム階層構造（ソケット・コライダー・破壊グループ）を出力する

キャラクター・ヒューマノイド対応（v1.2以降）

v1.2からはヒューマノイドキャラクターの再構築にも対応しました。解剖学トラック・プロポーション固定・顔の特徴配置を備え、特定人物や架空キャラクターの3D再現が可能になっています。

ゼロ依存・トークン効率設計

Python 3.10+標準ライブラリのみでゼロ依存インストールを実現します。pip・PIL・numpy・Playwrightは不要。また、PNGの読み書きはstructとzlibで実装されており、外部ライブラリへの依存が完全にゼロです。コード生成はその時点で解放されているパスのみを出力するため、トークン消費も最小限です。

img2threejs の使い方・始め方

Claude Codeのスキルディレクトリにクローンするだけで使用を開始できます。

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

Claude Codeで対象画像を添付し、以下のコマンドを実行します。

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

スキルは画像を検証し、評価とスペックを書き込み、パスごとにファクトリーコードを生成しながらサイドバイサイド比較を表示し続けます。個別スクリプトを直接実行することも可能です。

# 画像のプローブ・適性チェック
python3 forge/stage1_intake/probe_image.py <image>

# スペック生成・検証
python3 forge/stage2_spec/new_sculpt_spec.py "ObjectName" --image <image> --out spec.json
python3 forge/stage2_spec/validate_sculpt_spec.py spec.json --strict-quality

# Three.jsファクトリー生成
python3 forge/stage3_build/generate_threejs_factory.py spec.json --out src/createObjectModel.ts

img2threejs の活用事例

Webゲーム開発でのアセット高速プロトタイピング

Webゲームエンジニアが商品写真や資料画像から3Dアセットのプロトタイプを自動生成し、3Dモデリング工数を削減するシナリオに最適です。従来はBlenderなどのDCCツールで手動モデリングが必要だった工程を、Claude Codeスキルで大幅に自動化できます。特にhard-surfaceオブジェクト（武器・道具・デバイス・家具）の再現精度が高く、ゲームのプロトタイプフェーズで威力を発揮します。

ECサイトの製品3Dビジュアライゼーション

フロントエンドエンジニアがECサイトの製品3Dビジュアライゼーション用モデルを参照写真から迅速に作成できます。出力はThree.js TypeScriptファクトリーコードのため、React・Vue・Astroなど任意のWebフレームワークに直接組み込み可能。メッシュファイルのダウンロードや変換処理が不要で、コードとして版管理できる点も大きなメリットです。

なぜ今このツールか？フォトグラメトリーや3DスキャンとのThree.js自動生成の違い

従来の画像から3Dモデルを生成するアプローチとしては、フォトグラメトリー（複数画像からメッシュを生成）や3Dスキャン、NeRF（Neural Radiance Fields）などがありますが、img2threesjはこれらとは根本的に異なるアプローチを採っています。

フォトグラメトリー・3Dスキャンとの主な違い:

  • フォトグラメトリーはバイナリのメッシュ/テクスチャファイルを出力するが、img2threesjはThree.js TypeScriptコードを出力する（差分可能・版管理可能）
  • 3Dスキャンは複数枚の高品質画像や専用機器が必要だが、img2threesjは1枚の参照画像のみで動作する
  • NeRFはリアルな見た目のレンダリングに強いが、ランタイム統合やアニメーション対応が難しい。img2threesjはアニメーション・インタラクション対応のランタイム階層を標準出力する

AIエージェントスキルとして動作することで、Blenderなどのアートツールやスキャン機器を必要とせず、開発ワークフロー内で完結する点が2026年の今特に支持されています。

こんな人に向いている

Three.jsエンジニア・Webゲーム開発者が最も恩恵を受けられるツールです。製品ページのインタラクティブ3Dビジュアライゼーション、ゲームのアセットプロトタイプ、AR/VRコンテンツの素材生成など、Three.jsベースのプロジェクトで3Dモデルを素早く揃える必要がある場面に最適です。

クリエイティブコーダー・インタラクティブデザイナーにとっても、概念実証（PoC）段階の3Dビジュアルを素早く形にするツールとして有用です。特にWebGLを使ったインスタレーション作品やジェネラティブアートの文脈で、参照画像からインタラクティブ3Dオブジェクトを素早く生成したいケースに向いています。

使う前に知っておきたいこと

プラットフォーム・動作要件

  • Python 3.10以上が必要（ゼロ依存のためpip install不要）
  • Claude Code、Codex、またはOpenCodeのいずれかのAIエージェント環境が必須
  • エージェントのビジョン機能（画像認識）を使用するため、ホストエージェントがビジョン対応している必要あり

精度の限界と誠実な告知

READMEには「1枚の画像では隠れた面の正確な再現は保証できない」と明記されています。隠れた面は見えている面をミラーリングして推定するため、複雑なオブジェクトでは結果が近似・様式化されることがあります。hard-surfaceオブジェクトで精度が高く、キャラクターは様式的な再現にとどまります。

ライセンス

Apache License 2.0。商用利用・改変・再配布が可能ですが、ライセンス表記と著作権表示が必要です。商用プロジェクトへの組み込み前にLICENSEファイルの確認を推奨します。

まとめ

img2threesjは3D資産制作の参入障壁を大幅に下げる革新的なAIスキルです。画像さえあればThree.js 3Dモデルが自動生成できるため、Three.js開発者・ゲームクリエイター・Web3DエンジニアがClaude Codeを使った開発ワークフローを持っているなら今すぐ試す価値があります。v1.3のCIEDE2000カラーメトリクス追加に続き、v1.4アニメーションリグ対応（SkinnedMesh・モーフターゲット・glTFエクスポート）も計画中です。

GitHub でチェックする →

この技術を学ぶ

クリエイティブコーディングや3D Webグラフィックスに興味を持った方には、Udemyのオンラインコースもおすすめです。

毎日更新のGitHubツール情報

LINEで受け取って最新情報をキャッチアップしよう

友達追加する（無料）

関連記事

この記事が役に立ったらシェアしてください