|

モデルにThree.jsを書かせて直接3Dファイルを生成しない：コード中間層ワークフローの5つの示唆

ByShark
モデルにThree.jsを書かせて直接3Dファイルを生成しない：コード中間層ワークフローの5つの示唆

著者注：Qwen3.5-4B-GLB-3D-Coder を例に、「テキスト→Three.js→GLB」というコード中間層のワークフローを分解し、実践可能な操作手順を紹介します。

大規模言語モデルにそのまま使える 3D ファイルを出力させるのは、多くのインディー開発者や小規模ゲームチームが直面してきた難題です。4B パラメータのコミュニティ微調整モデルは別のアプローチを示しました：モデルに Three.js コードを書かせ、ブラウザで GLB を書き出すという、生成とエクスポートを2段階に分ける方法です。

これはまた別の text-to-3D ツールまとめではありません。 Qwen3.5-4B-GLB-3D-Coder がエクスポートしたアセットはすでに Godot エディタにインポートでき、コミュニティ開発者の Naoki Kishida は同モデルが生成したアセットを使ってプレイ可能な 3D RPG デモを作りました。本記事が注目するのは、このパイプラインの背後にある再利用可能なエンジニアリング手法です。

核心価値：本記事を読み終えると、コード中間層がなぜ有効なのかを理解し、ローカルまたはクラウドでプロンプトから Godot アセットまでの一連の流れを実行できるようになります。

llm-threejs-code-intermediate-layer-workflow-ja-image-0

Three.js コード中間層の核心ポイント

コード中間層とは、モデルが最終的なバイナリファイルを直接出力するのではなく、実行可能なプログラムを出力し、そのプログラムが最終成果物を生成する仕組みです。この事例では、モデルが出力するのは独立した HTML ファイルで、Three.js シーンと「Export GLB」ボタンを含みます。

要点 説明 開発者にとっての価値
モデル出力 Three.js シーンとエクスポートボタンを含む単一の HTML ファイル 直接読んだり修正したりでき、ブラックボックスファイルではありません
最終成果物 ブラウザでボタンをクリックすると GLB をダウンロード Godot など GLB をサポートするツールにインポートできます
学習範囲 キャラクター、武器、乗り物、モジュール式建築など 25 種類のゲームアセット領域をカバー 1 つのツールでプロトタイプ段階の多くのプレースホルダー需要をカバーできます
実行方法 Q4_K_M と Q8_0 の 2 種類の GGUF 量子化バージョンを提供 LM Studio などのツールでローカル実行できます
品質上の位置づけ ローポリゴンのゲームアセットであり、写実的・映画品質の制作向けではありません プロトタイプ、プレースホルダー、スタイライズドプロジェクトに適しています

補足すると、Qwen3.5-4B-GLB-3D-Coder は開発者の CCORE が Qwen/Qwen3.5-4B をベースにファインチューニングした独立プレビュー版であり、Qwen 公式リリースではありません。モデルカードによれば、多くの生成結果は初回でそのまま使用できます。特に英語のプロンプトではそうです。ただし一部のアセットでは再試行やコードの手動修正が必要です。

Three.js コード中間層のワークフロー

全体の流れは 6 ステップにまとめられます。説明を入力し、HTML を生成し、ファイルを保存し、ブラウザでプレビューし、GLB をエクスポートし、エンジンにインポートします。モデルが担当するのは最初の 2 ステップで、エクスポートはブラウザ上で動作するコードが行います。モデルが GLB のバイナリ内容を直接組み立てる必要はありません。

アセットに動きが必要な場合、たとえば開くドアなどでは、システムプロンプトがモデルにアニメーションを追加し、エクスポートされる GLB に含めるよう指示します。明確な要求がない場合、モデルは既定で静的アセットを生成します。そのため、プロンプトにはアニメーション要件を明示してください。

llm-threejs-code-intermediate-layer-workflow-ja-image-1

Three.js コード中間層から得られる5つのワークフロー上の示唆

以下の比較は、この事例をもとに私たちが下したエンジニアリング上の判断であり、ベンチマークの結果ではありません。3D生成のアプローチにはそれぞれ適した範囲があり、ここでは2つの考え方の構造的な違いだけを比較します。

比較軸 3Dファイルを直接生成 Three.js コード中間層
モデルの出力 メッシュまたはバイナリアセット 可読性の高いテキストコード
エラー発生時の対処 通常は再生成するか、モデリングツールで修正する ジオメトリ、マテリアル、アニメーションを部分的に修正できる
書き出し前のプレビュー 専用のビューアツールに依存 HTMLをブラウザで開くだけで確認できる
アニメーション対応 使用するモデルとパイプライン次第 コードで記述でき、GLBとして書き出せる
得意とする範囲 具体的な手法による 構造が明確なローポリゴンアセット
主な制約 成果物に細かい編集を加えにくい 高精細・写実的なアセットは設計範囲外

llm-threejs-code-intermediate-layer-workflow-ja-image-2

示唆1：モデルが得意とする表現層を選ぶ。 コーディングモデルの強みは構造化されたテキストの出力であり、Three.jsはまさに3Dアセットをプログラミングの問題へと変換してくれます。このモデルはわずか4Bパラメータながらアセット生成タスクを担えていますが、その鍵はタスクがモデルの扱える形式に置き換えられた点にあります。

示唆2：中間生成物を検査可能にする。 HTMLファイルは生成結果であると同時に、デバッグの入り口でもあります。マテリアルの設定ミスやアニメーションループの不具合は、多くの場合その場で手直しでき、ゼロから生成し直す必要はありません。これにより、1回の失敗にかかるコストが大きく下がります。

示唆3：最後の工程は決定論的なツールに任せる。 ファイル形式の細部を、確率的なモデルがバイト単位で担う必要はありません。Three.jsのエコシステムにはGLTFExporterのような書き出し機能がもともと備わっており、モデルは書き出しを呼び出すロジックを書くだけで済みます。一般に、成熟したツールに任せる工程が多いほど、形式面の不確実性は小さくなります。

示唆4：汎用性よりも、狭いタスクと固定された約束事のほうが実用的。 このモデルのシステムプロンプトは固定されており、出力形式も単一のHTMLファイルに厳密に限定されています。同時に、25領域の学習データがアセット種別の網羅性を支えています。タスクの境界が明確だからこそ、小さなモデルにも十分な活躍の余地が生まれます。

示唆5：実際の利用先で検証する。 ブラウザ上で見栄えがよいからといって、そのアセットが使えるとは限りません。モデルカードでは、Godotエディタにインポートした後の結果も併せて公開されています。著者が次に目指す目標もこれに関連しており、信頼性の高い一発生成を実現し、Agentフレームワーク内で生成・テスト・最適化を自動で完了させることだとしています。

この考え方はゲームアセットに限った話ではありません。OpenSCADスクリプトはCADモデルを生成でき、Blender Pythonはモデリングのワークフローを動かせ、SVGやMermaidは図形やチャートを記述できます。対象フォーマットを直接生成するのが難しいなら、まずこう問いかけてみましょう――それを安定的に生み出せるコードの層が、ひとつ挟めないだろうか、と。

技術的なヒント：異なるモデルがThree.jsを書く性能を比較したい場合は、APIYI apiyi.com経由で同じプロンプトセットを使い複数のモデルを呼び出し、後述の受け入れチェックリストで統一的に評価するとよいでしょう。

Three.js コード中間層クイックスタート：ローカルデプロイ

以下では LM Studio を例に、追加のコードを書かずに進めます。LM Studio は GGUF モデルを直接読み込めるため、モデルブラウザで Qwen3.5-4B-GLB-3D-Coder を検索するか、Hugging Face からファイルをダウンロードしてローカルで読み込めます。

ステップ1：GGUF 量子化バージョンを選ぶ

モデルカードには正確な VRAM 要件が公開されていないため、ご自身のハードウェアで実際に試して確認してください。CPU 推論も可能ですが、速度は明らかに遅くなります。

バージョン 特徴 推奨シーン
Q4_K_M ファイルが小さく、メモリ使用量が少なく、推論も高速だが、品質はある程度犠牲になる ノートPCのGPU、構成が限られたデバイス、素早い反復
Q8_0 ファイルが大きく、よりフル精度に近い VRAMに余裕があり、複雑なアセットの初回成功率を高めたい場合

バージョン更新に注意：2つの量子化バージョンはいずれも2026年11月2日に重みが差し替えられました。作者によると視覚品質が明らかに向上したとのことですが、ファイル名は変わっていません。それ以前にダウンロードした場合は、削除して再ダウンロードすることをおすすめします。そうしないと古いバージョンを使い続ける可能性があります。

ステップ2：システムプロンプトとサンプリングパラメータを設定する

このモデルは特定の指示フォーマットに合わせて微調整されているため、モデルカードが提供するシステムプロンプトをそのまま使用し、独自に書き換えないことをおすすめします：

Create game assets for the Godot editor， which uses GLB files. Create whatever the user requests as a good-quality low-poly asset using only Three.js in one complete standalone HTML file. The HTML must show the asset and include an Export GLB button that downloads a working GLB. If the requested asset needs animation， add it and include the animation in the exported GLB； otherwise make it static.

LM Studio のシステムメッセージ欄に貼り付けたら、作者推奨のサンプリングパラメータを設定します。これらの値は作者がテスト時に使った出発点であり、必須ではありません。まず動作を確認してから調整してかまいません。

パラメータ 推奨値 設定場所
temperature 0.8 LM Studio 生成パラメータ
top_k 40 LM Studio 生成パラメータ
top_p 0.95 LM Studio 生成パラメータ
min_p 0.0 LM Studio 生成パラメータ

ステップ3：GLB を生成してエクスポートする

ユーザープロンプトは短く具体的にし、できるだけ英語を使います。まずは Create a blue goblin brute や Build a jungle siege platform を試してみてください。アニメーションが必要な場合は、Create a wooden gate with an opening animation のように書きます。その後、次の順序で操作します：

  1. プロンプトを送信し、モデルが完全な HTML を出力するまで待ちます。
  2. 出力内容を .html ファイルとして保存します。
  3. ブラウザでファイルを開き、アセットが正常にレンダリングされることを確認します。
  4. 「Export GLB」ボタンをクリックし、.glb ファイルをダウンロードします。
  5. GLB を Godot にインポートするか、この形式をサポートする他のツールにインポートします。

ページが真っ白な場合は、まずブラウザの開発者ツールを開いてコンソールのエラーを確認してください。スクリプトによっては、ファイルを直接ダブルクリックして開くとブラウザのローカルファイル制限を受けることがあります。その場合はファイルのあるディレクトリで python -m http.server を実行し、ローカルアドレス経由でアクセスします。

ステップ4：チェックリストでアセットを検収する

ブラウザ上のプレビューだけを見て判断しないでください。各アセットについて、以下の項目を確認することをおすすめします：

  • 構造：部品が完全か、明らかな位置ずれや交差がないか。
  • マテリアル：色やマテリアルが、エンジンにインポートした後もプレビューと一致するか。
  • アニメーション：アニメーションが実際に GLB に書き込まれ、エンジン内で再生できるか。
  • サイズと原点：スケールとピボットがシーンの要件に合っているか。この部分は手動調整が必要な場合があります。
  • 修正しやすさ：小さな問題はまずコードを修正し、構造的な問題は再生成します。

Three.js コード中間レイヤーのクラウド接続プラン

コード中間レイヤーの利点のひとつは、特定のモデルに縛られないことです。動作する Three.js を書けるモデルであれば、同じフローに組み込めます。公開情報によると、Qwen3.5-4B-GLB-3D-Coder は現在 GGUF 形式で配布されており、主にローカル推論向けです。お使いの環境で動かしにくい場合や、汎用コーディングモデルとの結果を比較したい場合は、クラウド API という選択肢があります。

APIYI はさまざまなモデルの API 呼び出しを提供しており、OpenAI と Anthropic のインターフェース形式に対応しています。既存のクライアントであれば、通常はエンドポイント URL・API キー・モデル名を変更するだけで済みます。なお、上記のファインチューニング済みモデルがクラウド呼び出しに対応しているかどうかは、モデル一覧の実際の表示でご確認ください。具体的な設定方法は APIYI のドキュメント（docs.apiyi.com）をご参照ください。

方式 主な特徴 向いている用途 料金の考え方 利用できるプラットフォーム
ローカル・ファインチューニングモデル GLB アセット向けにファインチューニング済み。ダウンロード後はオフラインで利用可能 プレースホルダーアセットの一括生成、オフライン実行が必要な場面 従量課金なし（ハードウェアは自前で用意） LM Studio などの GGUF 実行ツール
クラウドの汎用コーディングモデル ローカル計算資源が不要で、切り替えや比較が容易 マシンパワーに制約がある場合、複雑なプロンプトを試したい場合 APIYI の料金ページに準拠 APIYI（apiyi.com）および各モデルの公式チャネル
ローカルとクラウドのハイブリッド 量産はローカル、難物はクラウドへ コストと成功率の両立を狙うチーム クラウド部分は APIYI の料金ページに準拠 ローカルツール + API プラットフォーム

インターフェース経由で Three.js 生成モデルを呼び出す手順

  1. APIYI コンソールで API キーを作成し、ドキュメントで現在のエンドポイント URL を確認します。第三者のチュートリアルにあるアドレスをそのまま使わないでください。
  2. お使いのクライアントに合わせて OpenAI か Anthropic のインターフェース形式を選び、base_url と API キーを設定します。
  3. モデル一覧から試したいモデルを選び、その名前を model フィールドに入力します。
  4. 前述のシステムプロンプトを system メッセージに入れます。汎用モデルはこのタスク向けのファインチューニングを受けていないため、「完全な HTML だけを出力する」といった制約を追加するとよいでしょう。
  5. レスポンスを .html ファイルとして保存します。以降のプレビュー・エクスポート・検収の手順はローカル方式と同じです。

LM Studio のローカルサービスも同じく OpenAI 互換インターフェースを提供しています。そのため、同じクライアントでローカルとクラウドを切り替えられ、変更するのはエンドポイント URL とモデル名だけです。これにより、コード中間レイヤーより後ろのプレビュー・エクスポート・検収の各工程は一切変更せずに済みます。

料金について：モデルの単価、入出力の課金方法、キャッシュ価格は変更される可能性があります。本記事では具体的な数値は記載せず、すべて APIYI の料金ページの実際のデータに準拠します：https://docs.apiyi.com/models

llm-threejs-code-intermediate-layer-workflow-ja-image-3

よくある質問 FAQ

Q1: Three.js コード中間層ワークフローとは何ですか？

モデルにまず Three.js プログラムを書かせ、そのプログラムがレンダリングして GLB をエクスポートする方式を指します。モデルが直接 3D ファイルを出力するのではありません。これにより、エクスポート前に結果をプレビューしたり修正したりできます。

Q2: Qwen3.5-4B-GLB-3D-Coder は直接 GLB を出力できますか？

できません。出力されるのは独立した HTML ファイルで、ブラウザで開いて「Export GLB」ボタンをクリックして初めて GLB ファイルが得られます。

Q3: エクスポートした GLB は Godot 専用ですか？

いいえ。システムプロンプトは Godot のワークフローを目標にしていますが、GLB は汎用フォーマットであり、Unity、Blender、Web 3D ビューアなどのツールにもインポートできます。ただし、インポート後の結果は各ツールで個別に検証する必要があります。

Q4: このモデルはどのような用途に最も適していますか？

ローポリゴンスタイルのゲームプロトタイプやプレースホルダーアセットに最適です。例えば、NPC、武器、乗り物、モジュラービルディング、トラップなどです。高度にカスタマイズされた正式なアセットが必要な場合は、インポート後に手動での調整が必要になる見込みです。

Q5: 適切な GPU がない場合、API 経由でこのワークフローを試すにはどうすればよいですか？

APIYI apiyi.com 経由でモデルリストにあるコーディングモデルを呼び出し、ドキュメントに従って OpenAI または Anthropic 形式のインターフェースを設定できます。モデルが HTML を出力したら、その後のプレビューとエクスポートはローカルブラウザで行われます。

Q6: クラウド呼び出しの費用はどのように計算されますか？

モデルごとに単価や課金基準が異なるため、APIYI の価格ページ（https://docs.apiyi.com/models）を直接ご確認ください。まず少量のプロンプトで試し、実際の使用量に基づいてコストを見積もることをお勧めします。

Q7: 視覚投影ファイルは必須ですか？

必須ではありません。オプションの BF16 視覚投影ファイルは約 644 MiB で、Qwen3.5 マルチモーダル GGUF をサポートする実行環境で参照画像を入力するために使用します。テキストプロンプトのみを使用する場合は、ダウンロードする必要はありません。

Q8: このソリューションには現在どのような制限がありますか？

現在はプレビュー版であり、訓練セットはシンプルなプロンプトに偏っているため、複雑または稀な要件への汎化能力は限定的で、写実的なアセットを対象としていません。作者はデータセットと Safetensors の重みを公開し、約 10 万サンプル、コンテキスト長 8K から 128K tokens のより大きなバージョンを訓練する予定ですが、これらはまだ公開されていません。

Three.js コード中間層の核心ポイント

  • 基本的な発想：モデルに実行可能な Three.js コードを書かせ、それをプログラム側で GLB に書き出します。
  • 大きな利点：中間生成物はプレビュー・読解・部分修正ができるため、失敗したときのコストを抑えられます。
  • ローカルでの始め方：LM Studio で GGUF を読み込み、固定のシステムプロンプトと推奨サンプリングパラメータを組み合わせます。
  • バージョンに関する注意：11 月 2 日より前にダウンロードした重みは、削除してから再ダウンロードすることをおすすめします。
  • 適用範囲：ローポリのプロトタイプやプレースホルダーアセットに向いており、フォトリアルや映像制作レベルの用途には向きません。
  • クラウド経由の方法：APIYI を通じて OpenAI 形式または Anthropic 形式でモデルに接続し、効果を比較できます。
  • 手法の応用範囲：Blender Python や OpenSCAD などのシーンでも、この中間層の設計は応用できます。

まとめ

Qwen3.5-4B-GLB-3D-Coder の示唆は、小さなモデルがゲームアセットを生成できるという点だけにとどまりません。むしろ重要なのは、モデルとツールの役割分担を次のように引き直したことです。

  1. モデルは表現を担う：自然言語の説明を、構造の明確な Three.js コードへ変換します。
  2. ツールは実体化を担う：ブラウザと書き出しロジックが、標準的な GLB ファイルを生成します。
  3. 検証が実用性を決める：目的のエンジンにインポートし、チェックを通過して初めて本当に完成したと言えます。

まずはシンプルな静的プロップで全体の流れを通し、その後でアニメーションや複雑なアセットを段階的に試すのがおすすめです。複数のクラウドモデルを比較したい場合は、APIYI から統一的に呼び出せます。接続方法は docs.apiyi.com を参照し、価格は https://docs.apiyi.com/models の実際のデータを基準にしてください。

📚 参考資料

  1. Qwen3.5-4B-GLB-3D-Coder モデル紹介: モデルの位置づけ、25 のアセット領域と今後のロードマップ
  2. リンク： mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-model

  3. 説明： プロジェクト全体の概要やコミュニティ事例を把握したいときに最適です

  4. Qwen3.5-4B-GLB-3D-Coder ローカル実行ガイド: 生成メカニズム、量子化バージョンと適用性の分析

  5. リンク： mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-local

  6. 説明： モデルが自分のプロジェクト要件に合っているかを評価したいときに最適です

  7. LM Studio 設定ガイド: システムプロンプト、サンプリングパラメータと GLB エクスポート手順

  8. リンク： mindstudio.ai/blog/run-qwen3-5-glb-3d-coder-locally

  9. 説明： 手順に沿ってローカルデプロイを完了したいときに最適です

  10. APIYI ドキュメントと料金ページ: インターフェース接続の説明およびモデル料金データ

  11. リンク： docs.apiyi.com と docs.apiyi.com/models
  12. 説明： インターフェース設定と課金情報は、こちらにある最新内容を基準にしてください

作者: APIYI 技術チーム
技術交流: 接続の過程でご不明な点があれば、APIYI 公式サイト apiyi.com からお気軽にお問い合わせください。その他の資料はドキュメントセンター docs.apiyi.com でご確認いただけます

類似投稿