Repo-lab
クリエイティブ

Three.js Object Sculptor:画像から3D自動生成するCodexプラグイン徹底解説

⭐ 1,083 stars GitHub →

Three.js Object Sculptor:画像から3D自動生成するCodexプラグイン徹底解説

Three.js Object Sculptorは、添付画像のオブジェクトをThree.js手続き的3Dモデルとして自動生成するCodexプラグインです。フォトグラメトリーではなくAI駆動の「彫刻ワークフロー」で、アニメーション対応の階層構造を持つコードのみの3Dファクトリーを生成します。品質ゲート・AIビジョンレビューにより高品質な出力を保証します。

GitHubで急上昇中の Three.js Object Sculptor をご紹介します。 スター数 1083★ を獲得し、クリエイティブ・AI分野で注目されているCodexプラグインです。


Three.js Object Sculptor とは?

Three.js Object Sculptorは、ユーザーが提供する参照画像のオブジェクトを、コードのみのThree.js手続き的3Dモデルとして再構築するCodexプラグインです。フォトグラメトリーや外部アートパックのダウンロードは行わず、AI(Codex)を「彫刻ワークフロー」へ誘導することで、アニメーション対応の高品質な3Dモデルを生成します。

画像を検証→オブジェクトを精密に説明→ジオメトリとマテリアルシステムに分解→ブロックアウトから細部構築→アニメーション対応の階層構造配線→元参照とのブラウザレンダー比較、という7ステップのパイプラインが特徴です。

こんな人におすすめ:

  • エンジニア向け: Three.js/WebGL開発者やゲームエンジニアが、参照画像から3Dプロップを素早くプロトタイプ化できます
  • 非エンジニア向け: プログラミング知識が必要なため、エンジニア・3Dデザイナー専用ツールです

画像から3Dモデル 自動生成 使い方 — インストール手順

Codexへのインストール

まずリポジトリをローカルプラグインフォルダにクローンします:

mkdir -p ~/plugins
git clone https://github.com/vinhhien112/Three.js-Object-Sculptor-Codex-Plugin ~/plugins/threejs-object-sculptor

Codexのマーケットプレイス設定に以下を追加します(~/.agents/plugins/marketplace.json):

{
  "name": "threejs-object-sculptor",
  "source": {
    "source": "local",
    "path": "./plugins/threejs-object-sculptor"
  },
  "policy": {
    "installation": "AVAILABLE",
    "authentication": "ON_INSTALL"
  },
  "category": "Productivity"
}

その後、Codexでプラグインをインストール:

codex plugin add threejs-object-sculptor@local

基本的な使い方

Codexに画像を添付して、以下のプロンプトを送るだけです:

Use Three.js Object Sculptor to turn the object in this attachment into a procedural Three.js model built entirely with code.

アニメーション対応を明示する場合は:

Make it a real-time browser prop, action-ready for animation, transformation, physics, and destruction.

主な機能・特徴

アダプティブ彫刻ワークフロー

7段階の品質管理パイプラインで高品質な3Dモデルを生成します:

  1. 画像適合性チェック
  2. 複雑度評価と品質契約(プレスペック)
  3. リスクランク付きセマンティックモジュールスペック
  4. モジュールレベルの検証とキャッシュ
  5. 最終アセンブリと通常ビルドパス
  6. ブラウザスクリーンショットレビュー
  7. AIビジョン比較と自己修正

ジオメトリレジストリ

tube、lathe、extrude、curve sweep、section lofts、fitted shells、branch networks、masked surface scatterなど豊富なジオメトリタイプをサポート。未対応のジオメトリはサイレントにボックスに変換されず、明示的にエラーとして検出されます。

PBR素材エビデンス抽出

参照画像のピクセルから、アルベド・ラフネス・高さマップ・法線マップ・AOマップを抽出できます:

python3 scripts/extract_reference_pbr.py ./reference/oak-bark.png   --material-crop-confirmed   --out-dir ./generated/pbr/oak-bark   --material-id bark

Codex プラグイン Three.js 3D生成 — 活用事例

  • ゲームエンジニア: キャラクターや乗り物の参照画像からThree.js用の破壊可能プロップを素早く生成。アニメーション・衝突・エフェクトエミッタのアタッチポイントが事前設計された状態で出力されるため、実装工数を大幅削減できます
  • フロントエンドエンジニア: 製品画像からWebGLインタラクティブデモ向けの手続き的3Dモデルを自動生成。タワーシップ・古木など複雑な有機形状もコードのみで再現します
  • WebXR開発者: VR/ARコンテンツ向けのアセットをダウンロードなしでコードベースで管理。ファイルサイズを最小化しつつ品質の高い3Dシーンを構築します

BlenderやChatGPTとの違い — なぜ今このツールか

Blender等の3DCGツールとの比較: Blenderは手動モデリングで高精度なメッシュを作れますが、技術的習得コストが高く、コードとの統合が難しい。Three.js Object Sculptorは完全にコードのみで3Dモデルを生成するため、バージョン管理・自動化・CI/CD統合が自然に行えます。

ChatGPT/Gemini等の汎用AI生成との比較: 汎用AIは3Dモデルコードを生成できますが、品質チェックがなく「一発生成」で終わりがちです。Three.js Object Sculptorは品質ゲート・AIビジョンレビュー・自己修正ループを内蔵しており、アイデンティティ定義フィーチャーが失敗した場合はパスそのものが失敗する厳格な品質管理が特徴です。

2026年にCodexプラグインエコシステムが急成長している背景で、画像→3Dコードという明確なパイプラインを持つ本ツールが注目を集めています。


こんな人に向いている

  • Three.jsエンジニア: ゲームプロジェクトやインタラクティブWebデモで、参照画像から素早くプロップを生成したい方
  • WebGL/WebGPU開発者: プロシージャル3D生成に興味があり、Codexを活用した自動化ワークフローを構築したい方
  • クリエイティブエンジニア: 3DCGの手動モデリングに時間をかけず、コード駆動で3Dアセットを管理したいエンジニア

向かない方: フォトリアルな高精細メッシュが必要な方、スキャンされたリアルアセットが必要な方、Three.jsに不慣れな初心者の方には難易度が高めです。


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

ライセンス: MITライセンスで公開。商用利用・改変・再配布が可能ですが、著作権表示の保持が必要です。

技術的制限:

  • 1枚の画像では隠れた側面や正確なジオメトリを完全に再現できない(READMEに明記)
  • 透明ガラス・スモーク・液体・ファーを正確に再現するには追加参照ビューが必要
  • AIビジョンレビューが受け入れ判定の最終権限を持つため、スクリプトのみでは品質判定できない

要件: Python 3.10以上、Codex(ローカルプラグインサポート)、Three.jsを使用するブラウザプロジェクト


まとめ

Three.js Object Sculptorは、AIコーディングエージェント(Codex)と3D開発の融合を実現する画期的なプラグインです。品質ゲートとAIビジョンレビューを内蔵した段階的な彫刻ワークフローにより、参照画像から高品質なThree.js手続き的3Dモデルを生成できます。

ゲーム開発・WebGLデモ・インタラクティブWebサイトなど、Three.jsを使う開発者にとって、3Dアセット生成の自動化を実現する強力なツールです。まずデモサイト(タワーシップ・古木)で出力クオリティを確認してから導入を検討してみてください。

GitHub でチェックする →


この技術を学ぶ

3DグラフィックスやWebGL開発に興味を持った方には、Udemyのコースもおすすめです。

毎日更新のGitHubツール情報

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

友達追加する(無料)

関連記事

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