テクノロジー· 8分で読めます

VULKで作る3Dサイト:プロンプトからGLBまで、パイプラインが実際にやること

VULKが3Dサイトを構築する方法。コード内のThree.jsとReact Three Fiber、写真や一文から作るGLBモデルを、バージョンと数字つきで解説します。

João CastroJoão Castro
VULKで作る3Dサイト:プロンプトからGLBまで、パイプラインが実際にやること

2026年10月10日、VULKが現在実行しているコードと本番の記録に対して検証。

「3Dサイト」という言葉は、回転するロゴからゲームまで何でも指し得ます。この記事では、3Dサイトを頼んだときにVULKが正確に何をするのか、どのライブラリがプロジェクトに入るのか、3Dモデルがどう作られるのか、どれくらい時間がかかり、クレジットがいくらかかるのかを説明します。

VULKで「3D」と呼ぶものには2種類あり、料金のかかり方も異なります。

  1. コードによる3Dシーン。サイト自体が3Dで描画します。スクロールに合わせて回る商品、ポインターを追うヒーロー、全画面のシーンなどです。
  2. あなたのために作られる3Dモデル。あなたが説明した、または撮影した物体の本物のモデルファイル(GLB)を生成し、シーンに配置します。

プロジェクトに入るライブラリ

プロジェクトに3Dが必要な場合、生成側は3つのランタイムパッケージを追加します。バージョンは1か所で固定されているので、プレビューとエクスポートしたコードは一致します。

パッケージ バージョン
three 0.185.1
@react-three/fiber 9.6.1
@react-three/drei 10.7.7
@types/three 0.185.0

3Dのないプロジェクトには、これらのパッケージは一切入りません。3Dを描画しないランディングページが、3Dエンジンのダウンロードコストを払うことはありません。

シーンを囲むサイトは、VULKがどのWebサイトにも構築するのと同じReactとViteのプロジェクトで、動きにはGSAPを使います。ゲームやシミュレーターのように3Dビューが製品そのものである場合、VULKは全画面の「ステージ」レイアウトに切り替え、シーンがビューポート全体を占めます。このレイアウトでは、Three.js、React Three Fiber、Dreiをインポートできるのはプロジェクト内の1ファイルだけです。そのため3Dのコードは1か所にまとまり、見つけて編集しやすくなります。

3Dモデルの作られ方

「テキストから3D」をうたう話の多くが飛ばすのがこの部分なので、実際の流れを示します。

モデルは画像から作られます。VULKは画像をTencentのHunyuan 3D Pro 3.1に送り、マテリアル付きのGLBファイルを受け取ります。物体を言葉で説明した場合、VULKはまずデフォルトの画像モデル(Gemini 3.1 Flash Image)で参照写真を作り、その写真からメッシュを構築します。自分の写真を添付した場合は、その写真が元になります。つまりVULKの「テキストから3D」は、テキストから写真、写真からモデルという流れで、モデルの元になった写真を見ることもできます。

物体を頼むときには、仕上げとポーズを選べます。後から物体の変更を頼むと、VULKは元の物体が作られた写真から新しい物体を作るので、元のものは失われません。

次に、ファイルをWeb向けに整えます。すべてのモデルは@gltf-transform/cli 4.5.0を使った同じ仕上げ工程を通ります。

  • テクスチャはロスレスのWebPに再エンコードされるので、法線マップやラフネスマップに圧縮アーティファクトが生じません。
  • ジオメトリはDracoで圧縮し、位置を16ビット、法線を12ビット、テクスチャ座標を14ビットで量子化します。
  • テクスチャのサイズは受け取ったまま保ち、三角形も減らしません。簡略化は、誤差の設定をごく小さくしても、なめらかな塗装パネルに目に見える折れ目を生んだため、仕上げ工程では元のジオメトリをそのまま残します。

そして検査されます。ファイルは、実際にジオメトリを含む有効なGLBでなければなりません。その後、計画用のモデル(GPT-6.1 Sol)が何を検査するかを書き、別のビジョンモデル(Gemini 3.7 Flash)が画像を見て、コード内の固定ルールが最終判断を下します。1つのジョブに許される有料の試行は最大3回で、黙って4回目を試すことは決してありません。

かかる時間(実測)

2026年10月10日に確認した本番の記録によると、2026年9月11日から10月8日までに完了したモデルジョブの中央値は、作成された時点から最終更新までで485秒、約8分でした。

モデルが完成したら、プロジェクトカード内のその行からGLBファイルとしてダウンロードし、ほかの場所で使うこともできます。

費用

  • Builderには3Dが含まれません。コードによるシーンも、生成されるモデルもです。プランカードでも、この行は含まれないと表示されます。
  • Pro、Max、Team、Business、Enterpriseには両方が含まれます。
  • 生成される3Dモデルは1つにつき30 VULKクレジットです。1つのプロジェクトに入れられる物体の数は、サイトごとに3つや4つといった固定の上限ではなく、クレジット残高で決まります。

プランの価格は料金ページにあります。2026年10月10日に確認した時点で、Builderは月額$19.99、Proは$39.99、Maxは$199です。

3Dを描画できないデバイスではどうなるか

すべての訪問者がWebGLを使えるわけではありません。WebGLがない場合、シーンは空白の四角形ではなく、サイト自身の色を使ったウォッシュという、デザインされたフォールバックを表示します。シーンは訪問者のモーションを減らす設定を尊重し、幅768ピクセル未満の画面では低いピクセル密度でレンダリングします。

既存のプロジェクトから3Dを取り除くこともできます。VULKに削除を頼むと、3Dのランタイムを外し、それを使っていたページを調整します。壊れたインポートを残すことはありません。

ゲーム:今あるもの

VULKにはゲームの依頼がよく来るので、製品がやることとショーケースにあるものを分けて説明しておく価値があります。

製品では:ゲームはステージモードの3Dプロジェクトです。小さなゲームは、自己完結したHTMLとしてチャットの中で直接動かすこともできます。上限は64 KBで、周りのページにアクセスできないサンドボックス化されたフレームで表示されます。

ショーケースでは:Ruturaは、私たちのチームが構築し、ショーケースのオリジナルとして公開したアドベンチャーゲームです。2人のキャラクターはサイトから配信される本物のスキンメッシュモデルで、レンジャーのファイルは10,237,204バイト、174,688個の三角形と52ジョイントのスケルトンを持ち、各キャラクターに3つのアニメーションクリップがあります。

開いて見られる公開3Dプロジェクト

以下は私たちのチームが構築・公開したショーケースのプロジェクトです。ノートパソコンとスマートフォンの両方で開いて、シーンがそれぞれでどう振る舞うかを確かめてください。

  • Unfold:あらゆる角度から見た1つの物体。
  • Ossa:React Three Fiberのシーンに置かれた石のスピーカー。
  • Rutura:上で紹介したアドベンチャー。
  • Miso:キネティックな世界にいる小さな猫。

全カタログはショーケースにあり、カテゴリで絞り込めます。

よくある質問

VULKはどの3Dライブラリを使っていますか?

Three.js 0.185.1と、React Three Fiber 9.6.1、Drei 10.7.7です。3Dを描画するプロジェクトにだけ追加されます。

VULKは写真から3Dモデルを作れますか?

はい。写真を添付すれば、VULKはHunyuan 3D Pro 3.1でその写真からモデルを構築します。テキストの説明からの場合、VULKはまず参照写真を作り、それをもとに構築します。

モデル1つにどれくらいかかりますか?

2026年9月11日から10月8日までに完了したジョブの中央値は485秒、約8分でした。

3Dにはどのプランが必要ですか?

Pro以上です。Builderには3Dシーンも生成モデルも含まれません。生成されるモデルは1つにつき30クレジットです。

公開日: 執筆: João Castro · 8分で読めます

続けて読む

記事一覧 →
VULKサポート

オンライン

こんにちは!本日はどのようにお手伝いできますか?

人気のトピック

AIサポート • support.vulk.dev