img2threejs とは？参照画像1枚からThree.jsコードを自動生成するAIスキル

img2threejsは、参照画像1枚からThree.jsの3Dモデルコードを自動生成するAIエージェントスキルです。メッシュファイルなしで、プリミティブとシェーダーだけでブラウザ上で動く3Dモデルを生成します。Claude Code・Codex・OpenCode上で動作します。

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

img2threejs とは？

img2threejsは、参照画像1枚を入力とし、Three.jsのプロシージャルコードに変換するAIエージェントスキルです。フォトグラメトリーやBlenderのメッシュ抽出といった従来の3D変換手法とは根本的に異なり、すべてのモデルはTypeScriptのファクトリ関数として生成されます。生成されたコードはブラウザ上でそのままライブ動作し、メッシュファイルのダウンロードも不要です。

2026年7月にv1.0がリリースされ、キャラクター・ハイブリッドドメイン検出と人体テンプレートが追加されました。段階的なスカルプティングパイプライン（8フェーズ）と厳格な品質ゲートにより、浅いスペックのまま低品質なコードが生成されることを防いでいます。1コントリビューターが開発を主導し、ROADMAPも公開されています。

こんな人におすすめ:

エンジニア向け: Three.jsで3Dモデルを実装するフロントエンドエンジニアやゲーム開発者が、参照画像から即座にアニメーション対応の3Dモデルコードを生成できます
非エンジニア向け: プログラミング知識が必要なため、エンジニア専用ツールです

主な機能・特徴

参照画像1枚からThree.jsプロシージャルコードを自動生成する — 入力は画像1枚のみ。Claude Codeなどのエージェントが画像を解析し、TypeScriptファクトリ関数を出力します
8段階のビルドパスで高品質な3Dモデルを構築する — blockout → structural-pass → form-refinement → material-pass → surface-pass → lighting-pass → interaction-pass → optimization-pass の順に段階的に精度を高めます
キャラクター・オブジェクト・ハイブリッドを自動分類して処理する — 被写体をドメイン別に分類し、人体テンプレートや詳細インベントリを自動適用します
厳格な品質ゲートがコード生成前にスペックの深さを検証する — スペックが不十分なうちはコード生成がブロックされます
Claude Code・Codex・OpenCodeとエージェント駆動で連携する — ブラウザMCP、ネイティブ画像読み取り、スクリーンショットなど複数のビジョン手段に対応します

使い方・始め方

img2threejsはClaude Code、Codex、OpenCode上のAIスキルとして動作します。

基本的な使い方

まずはGitHubリポジトリのSKILL.mdに記載された手順に従い、スキルをエージェント環境に組み込みます。

# Claude Code での基本コマンド例
/img2threejs Rebuild this object as a Three.js model, keep the proportions, angles, and colours.

スキルは以下のパイプラインで動作します：

参照画像 → プローブ・適合性チェック → Pre-Spec評価（クラス・複雑度・品質契約）
         → ObjectSculptSpec作成 → 厳格品質検証 → ビルドパス実行
         → ブラウザレンダリング → エージェントビジョンレビュー → 修正ループ
         → アニメーション対応Three.jsモデル完成

ライブデモで確認する

デモギャラリーでは以下のようなモデルがすべて生成コードで動いています：

Sony WF-1000XM3 ワイヤレスイヤホン + ケース
ドラえもんの家（等角図ジオラマ）
戦術ナイフ・ショットガンなどの硬表面オブジェクト

ブラウザ上でオービット（ドラッグで回転）・ズームが可能で、生成されたTypeScriptソースコードも確認できます。

活用事例

ゲームエンジニアによる3Dアセット高速プロトタイプ

ゲームエンジニアが製品コンセプトアートや参照画像を用意し、img2threejsに投入することで、Three.jsの3Dアセットコードを数分で取得できます。従来はBlenderでモデリング → エクスポート → Three.jsインポートという工程が必要でしたが、このスキルはコードを直接生成するため、ゲームプロトタイプのイテレーション速度が大幅に向上します。

フロントエンドエンジニアによるECサイト3D商品展示

ECサイト開発者が商品の実物写真を用いてThree.jsモデルを生成し、インタラクティブな商品展示を低コストで実現できます。生成されたコードはroot.userData.sculptRuntimeとして公開されるランタイム階層（ピボット・ソケット・コライダー）を持つため、そのままアニメーション実装に繋げられます。

Blender・Meshy.aiとの違い — なぜ今このツールか

従来の3Dモデル生成ツールと比較したときのimg2threejsの差別化ポイントは「コード出力」です。

手法	出力形式	ファイルサイズ	アニメーション対応	バージョン管理
img2threejs	TypeScript関数	小（テキスト）	対応済み	Git管理可能
Blender	.glb/.fbxメッシュ	大（バイナリ）	別途設定必要	困難
Meshy.ai	3Dメッシュ	大（バイナリ）	別途設定必要	困難
Spline.design	Spline形式	中	対応	独自形式

img2threejsが生成するのはdiff可能なTypeScriptコードです。コードレビュー・バージョン管理・CI/CDパイプラインへの統合が容易で、開発ワークフローに自然に組み込めます。

こんな人に向いている

1. Three.jsフロントエンドエンジニア

WebGLやThree.jsを使って3Dインタラクションを実装したいが、3Dモデリングのスキルはない、または時間をかけたくないという方に最適です。スクリプトが生成するコードはPBRマテリアル・リアルライティング・コライダー階層を備えており、本番環境でそのまま使えるクオリティを目指しています。

2. ゲームデザイナー・インディーゲーム開発者

Unity・Unreal以外のブラウザゲームを開発するインディーデベロッパーが、手描きコンセプトアートや参照写真からThree.jsアセットを素早くプロトタイプするユースケースに対応します。v1.0でキャラクタードメイン対応が追加されたため、キャラクターモデルの生成も可能になりました。

3. プロダクトデザイナー・UXエンジニア

商品サイトや製品デモページに3Dモデルを組み込みたいデザイナーとエンジニアのコラボレーションに活用できます。参照画像から生成したモデルをVercelなどにデプロイすれば、静的サイトに動くプロダクトビジュアライゼーションを追加できます。

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

動作環境の制限

img2threejsはClaude Code・Codex・OpenCodeのエージェント環境でのみ動作します。スタンドアロンのCLIや通常のPythonスクリプトとしては動作しないため、エージェント環境のセットアップが前提条件です。

単一画像からの限界

README内に明記されていますが、「単一画像では100%の忠実度を保証できない」と記載があります。特にキャラクターの顔認識（likeness）については、複数のビューアングルを提供することで精度が向上します。複雑なオブジェクトや人物モデルの生成では、追加の参照画像が必要になる場合があります。

ライセンス

MITライセンスで公開されており、商用利用・改変・再配布が可能です。ただし、生成されたコードの商用利用前に、Three.js本体のライセンス（MIT）も確認することを推奨します。

パフォーマンス要件

8段階のビルドパスを経るため、複雑なオブジェクトの生成にはエージェントの複数ターンが必要です。単純なオブジェクトでも数十ターンのエージェント実行を想定した方がよいでしょう。

まとめ

img2threejsは、参照画像1枚から高品質なThree.jsプロシージャルコードを自動生成する革新的なAIスキルです。フォトグラメトリーや手動モデリングが不要で、生成物がdiff可能なTypeScriptコードであるため、開発ワークフローへの統合がスムーズです。

Claude Code・Codex・OpenCodeを日常的に使用しているフロントエンドエンジニア、ゲーム開発者、プロダクトデザイナーにとって、3D実装のハードルを大幅に下げるツールです。まずはライブデモギャラリーで生成物のクオリティを確認してみてください。

GitHub でチェックする →

この技術を学ぶ

クリエイティブ系技術に興味を持った方には、Udemyのオンラインコースもおすすめです。

🎓 関連するThree.js・3Dグラフィックスコース一覧 — セール時（最大90%OFF）を狙うとお得です

img2threejs とは？参照画像1枚からThree.jsコードを自動生成するAIスキル

img2threejs とは？参照画像1枚からThree.jsコードを自動生成するAIスキル