プロンプトから3Dへ:VULKがThree.jsコードを生成する仕組み

2026年7月17日更新 — 検証済みプラットフォームデータと現行の生成パイプラインで刷新。

VULKはどうやってテキストプロンプトをThree.jsコードに変えるのか?

短く完全な答え:VULKは3ステージのパイプラインを実行します。ステージ1はプロンプトを解析してシーンアーキテクチャ(ジオメトリ、ライティング、インタラクション、制約)に変換します。ステージ2は実際のThree.jsコード — シーン、カメラ、レンダラー、マテリアル、アニメーションループ — を、テンプレートの穴埋めではなく、本物の実行可能なモジュールとして生成します。ステージ3はそのコードを生きたWebアプリに適合させます:Reactライフサイクル統合、レスポンシブなキャンバス、Retina対応、ローディング状態、TypeScript。出力は数秒でライブプレビューにレンダリングされ、会話で洗練していけます(「回転を50%遅くして」「ブルームの光を追加して」)。

これが従来の壁を崩壊させます。洗練されたインタラクティブなシーンを出荷できるレベルまでThree.jsを学ぶには数週間から数か月かかりますが、シーンを説明するのは一文で済みます。ゲームとインタラクティブ体験はすでにプラットフォームで生成されるものの5.4%を占め、ダッシュボードと管理パネルに次ぐ第2のアプリカテゴリです(VULKプラットフォームデータ、2026年7月、N = 10,994アクティブプロジェクト)。3D生成はProプラン以上の3D Studioで利用できます。

パイプラインの各ステージでは何が起きるのか?

ステージ1:リクエストを理解する

最初のモデルがプロンプトを読み、あなたが説明しているもののメンタルモデルを構築します:

「インタラクティブなプロダクトショーケースを作って。各面に商品画像を貼った回転する3Dキューブ。クリックで回転の一時停止/再開。モバイル対応。」

モデルはこう抽出します:

• 中心コンセプト:回転するプロダクトショーケース
• 主要なジオメトリ:キューブ
• 主要なインタラクション:クリックで一時停止
• 主要な制約:モバイル対応
• スタイルのヒント:「インタラクティブ」「プロダクト」

ここから、モデルは詳細なアーキテクチャプランを生成します:

Scene:
  - Camera (perspective, positioned to see cube)
  - Lighting (key light, fill light, back light)
  - Cube geometry with image textures on each face

Interaction:
  - Raycaster for mouse/touch input
  - Animation state machine (rotating/paused)
  - Toggle on click

Performance:
  - Texture compression
  - Simple geometry (don't overdraw)
  - No unnecessary effects

このアーキテクチャはランダムではありません。よく書かれたThree.jsコードの何千もの例に基づいています。

ステージ2:コード構造を生成する

2番目のモデルがそのアーキテクチャを受け取り、完全なThree.js実装を生成します:

import * as THREE from 'three';
import { TextureLoader } from 'three';

export class ProductShowcase {
  constructor(container) {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    this.isRotating = true;
  }

  setupLighting() {
    const keyLight = new THREE.DirectionalLight(0xffffff, 1);
    keyLight.position.set(5, 5, 5);
    this.scene.add(keyLight);

    const fillLight = new THREE.DirectionalLight(0xffffff, 0.5);
    fillLight.position.set(-5, 3, 5);
    this.scene.add(fillLight);

    const backLight = new THREE.DirectionalLight(0xffffff, 0.3);
    backLight.position.set(0, 5, -5);
    this.scene.add(backLight);
  }

  setupCube() {
    const loader = new TextureLoader();
    const materials = [
      new THREE.MeshPhongMaterial({ map: loader.load('/faces/front.jpg') }),
      new THREE.MeshPhongMaterial({ map: loader.load('/faces/back.jpg') }),
      // ... rest of faces
    ];

    const geometry = new THREE.BoxGeometry(2, 2, 2);
    this.cube = new THREE.Mesh(geometry, materials);
    this.scene.add(this.cube);
  }

  setupInteraction() {
    document.addEventListener('click', (e) => {
      this.isRotating = !this.isRotating;
    });
  }

  animate() {
    requestAnimationFrame(() => this.animate());

    if (this.isRotating) {
      this.cube.rotation.x += 0.005;
      this.cube.rotation.y += 0.01;
    }

    this.renderer.render(this.scene, this.camera);
  }
}

これは空欄を埋めたテンプレートではありません。実際に動く本物のコードです。

モデルが正しくこなしている点に注目してください:

• 正しいThree.jsパターン(Scene、Camera、Renderer、Mesh)
• 3点照明による理にかなったライティングセットアップ
• それらのライトと機能するマテリアル(MeshPhongMaterialはディレクショナルライトに反応)
• requestAnimationFrameを使った正しいアニメーションループ
• タッチフレンドリーなインタラクション
• モバイルへの配慮(レスポンシブなカメラセットアップ)

ジュニア開発者ならこれを書くのに4時間以上かかるでしょう。モデルは数秒で生成します — プラットフォーム全体で、登録から最初のアプリ生成までの時間の中央値は47秒です(VULKプラットフォームデータ、2026年7月)。

ステージ3:プラットフォームに適合させる

コードは単体でコンパイルできるだけでは足りません。動いているWebアプリケーションに収まる必要があります:

• Reactライフサイクルへの接続(useEffect、クリーンアップ)
• レスポンシブなキャンバスのリサイズを追加
• Retinaディスプレイのピクセル密度に対応
• テクスチャ読み込み中のローディング状態を提供
• TypeScriptへのエクスポート

最後の点は見た目の問題ではありません:VULKで生成される全コードファイルの65%はTypeScriptです(VULKプラットフォームデータ、2026年7月、N = 124,755ファイル)。3D出力も同じ規約に従います。結果は、Vite + Reactプロジェクトにそのまま収まり、ホットリロード付きのサーバーサイドライブプレビューでレンダリングされる、完全でデプロイ可能なコンポーネントです。

なぜプロンプトから3Dへの生成が実際に機能するのか?

Three.jsにはパターンがあります。すべてのシーンは同じ基本構造に従います:

1. シーン、カメラ、レンダラーのセットアップ
2. ジオメトリとマテリアルの追加
3. ライティングの追加
4. レンダーループの実装
5. ユーザー入力の処理

モデルは各パターンの何千もの例を見てきました。構文だけでなく、その理由も学んでいます。なぜキーライトにDirectionalLightを使うのか、なぜMeshPhongMaterialがライティングに反応するのか、なぜレンダーループが必要なのか、なぜウィンドウのリサイズイベントを処理するのかを知っています。

モデルが確実に正しくこなすことは?

フォローアッププロンプトはどうやって3Dシーンを洗練するのか?

生成はコードで終わりません。洗練していけます:

「キューブの回転が速すぎる。50%遅くして。」

モデルはこれが回転速度を指すと理解し、増分を調整します:

if (this.isRotating) {
  this.cube.rotation.x += 0.0025; // Changed from 0.005
  this.cube.rotation.y += 0.005;  // Changed from 0.01
}

「キューブの周りにグローエフェクトを追加して。」

モデルはThree.jsのEffectComposerとUnrealBloomPassを使ったポストプロセッシングパイプラインを生成し、必要なインポートとセットアップを追加します。

「背景を青から紫へのグラデーションにして。」

モデルはフラットな背景色を、大きな球体に適用したキャンバスグラデーションに置き換えるか、キャンバステクスチャにレンダリングします。

各フォローアップは、シーンのコンテキストを理解した本物の外科的なコード修正です。これは人々のプラットフォームの使い方全般と一致します:ビルド会話の中央値はわずか4メッセージですが、上位10%のプロジェクトは25メッセージを超えます — 1つのプロンプトでシーンを得て、それからイテレーションのループで自分のものにしていくのです(VULKプラットフォームデータ、2026年7月)。

まだ3Dの専門知識が必要なことは?

モデルにはできないこと:

• 200万ポリゴンで60fpsを維持する最適化(プロファイリングが必要)
• カスタム物理の実装(CannonやRapierが依然として必要)
• 独自エフェクトのための特注シェーダーの作成
• 特殊なフォーマットの外部3Dモデルの統合
• GPU固有のパフォーマンス問題のデバッグ

ほとんどのユースケースでは、これらはエッジケースです。3D Webプロジェクトの大多数 — プロダクトショーケース、ヒーローシーン、ブラウザゲーム、データビジュアライゼーション — では、生成されたコードはプロダクション対応です。

これは3D Web開発にとって何を意味するのか?

これはWebグラフィックスのスキルが単一のインターフェースに統合されるということです。Three.jsを学ぶのではありません。3D体験を言葉で説明する方法を学ぶのです。翻訳はモデルが担います。

Web上の3Dの壁は、「数か月の学習」から「数秒の待ち時間」へと崩壊したところです。