AI で作った 3D と映像でゲームを作ってみた ブラウザで遊べる 1 面を公開

生成 AI で作った 3D・画像・動画・音を組み合わせて、ブラウザで遊べる小さな 3D のゲームを 1 面作りました。素材は 17 件・392.6 クレジットで、どれも 1 回目の結果をそのまま使っています。つまずいたのは素材の出来よりも組み合わせる所で、3D の向きと大きさがそろわない、そのままでは重い、面を減らすと絵に線が出る、ページの CSP で 3D の絵が読み込めない、の 4 つが大きなものでした。

結果の早見

• AI に作らせた物: 3D・画像・動画・音の 17 件です。クレジットの 91% は 3D と動画でした。
• 編集部が作った物: プログラムと素材の直しです。島の側面、石の台、光の粒、足もとの影も three.js の形で作りました。
• 確かめ: ヘッドレスの Chrome(画面を出さずに動かすブラウザ)で、PC とスマホの大きさ(タッチ)の両方を自動の操作でクリアまで動かしました。エラーも、外のサイトへの通信も 0 件でした。

遊んでいる様子

• GPU の無いヘッドレスの Chrome では 1 秒に 2 コマほどしか描けないため、ゲームの時間を 1/30 秒ずつ進めて撮り、つないでいます。
• 操作は、ゲームの中の位置を読んでキーを押す、編集部の自動の操作です。13.9 秒で 5 つ集めました。人が遊んだときの時間は測っていません。

作ったゲーム

• 丸い島の上でロボットを動かし、光る結晶を 5 つ集めるとクリアです。1 つは高さ 1 の石の台の上にあり、ジャンプして乗ります。
• 木が 11 本あり、ぶつかると通れません。カメラは斜め上から追いかけ、回りません。キーの向きと画面の向きが同じです。
• タイトルとクリアの画面では、AI で作った動画を後ろで流します。
• 置いたのは、HTML・CSS・game.js、three.js 0.186.1、素材 14 ファイルなど、合わせて 21 ファイル・6.48 MB です。外の CDN(ほかのサーバーから部品を読み込む仕組み)は使っていません。
• npm の three 0.186.1 の build のフォルダには、縮めた版(.min.js)がありませんでした。esbuild(JavaScript を縮める道具)で縮め、three.js の部分を 2.29 MB から 0.79 MB にしました。MIT ライセンスの全文(LICENSE)と、縮めたことを書いた NOTICE.txt を同じフォルダに置いています。

素材ごとのプロンプトとできた物

渡した文(プロンプト)を、そのまま載せます。同じ文で試せます。

画像: GPT-Image-2.5 Sunburst

設定は YOBITSUGI AI の provider openai と best(GPT-Image-2.5 Sunburst)です。大きさは、空だけ 1536×1024、ほかは 1024×1024 にしました。

ロボットの設定画(1024×1024):

3D ゲームのキャラクターの設定画。架空の小さな探検ロボット 1 体の全身を、正面から見た絵。体は丸いたまご形で、白とだいだい色。顔は黒い画面で、水色の丸い目が 2 つ。短い腕が 2 本、短い足が 2 本。頭の上に、先が丸い緑のアンテナが 1 本。腕を少し下に開いて、まっすぐ立っている。背景は真っ白で、床の影も、ほかの物も描かない。やわらかい陰影の、3D のおもちゃのような質感。文字やロゴは入れない。

結晶の設定画(1024×1024):

3D ゲームで集めるアイテムの設定画。青く光る結晶のかたまり 1 つ。先のとがった六角柱の結晶が 3 本、小さな灰色の岩の上から生えている。真ん中の 1 本がいちばん長い。斜め前から見た全体。背景は真っ白で、床の影も、ほかの物も描かない。やわらかい陰影の、3D のおもちゃのような質感。文字やロゴは入れない。

木の設定画(1024×1024):

3D ゲームの背景に置く木の設定画。丸くてふっくらした緑の葉のかたまりが 3 つ重なった、背の低い木 1 本。幹は太くて短い茶色。斜め前から見た全体。背景は真っ白で、床の影も、ほかの物も描かない。やわらかい陰影の、3D のおもちゃのような質感。文字やロゴは入れない。

地面の模様(1024×1024):

3D ゲームの地面に貼る、くり返して並べられる模様の画像。真上から見た、短い芝生と小さな白い花がまばらに混じった地面。明るい黄緑。影や光の向きが分からない、むらの少ない平らな明るさ。上下左右の端がつながるように描く。物や文字は入れない。

空(1536×1024):

3D ゲームの背景に使う空の画像。晴れた昼の空。上は濃い青、下(地平線の近く)は明るい水色。白いふわふわした雲が下半分にいくつか浮かぶ。地面・山・建物・太陽・鳥は描かない。左右の端がつながるように描く。文字は入れない。

• 部品の数は、ロボットと結晶はすべて合っていました。木は「葉のかたまりが 3 つ」と書きましたが 5 つで、3D もこの絵のまま 5 つです。
• 地面は、並べても継ぎ目が目立ちませんでした。空は、つなぐと継ぎ目が見えました(「つまずいた所」の 5)。

3D: Tripo v3.1 と Meshy

3D は文章からではなく、上の設定画を 1 枚ずつ渡して作りました。文のプロンプトはありません。ロボットと結晶は Tripo(既定の standard = v3.1)、木は Meshy(既定)です。木だけ Meshy にしたのは、Tripo と Meshy の比較で Meshy のファイルが小さかったためです。

• 3 個とも、元の絵の部品の数のとおりでした(ロボットの目・腕・足・アンテナ、結晶 3 本、木の 5 つのかたまり)。元の絵に写っていない後ろ側も、形と色が付いていました。
• 届いた GLB(3D の形と絵をまとめたファイル)には、動かすための骨(スキン)も、動きのデータ(アニメーション)も入っていませんでした。ゲームでは、体ごと傾けて上下に揺らし、歩いているように見せています。

動画: Kling 3.0

動画は 2 本です。最初の場面の絵を GPT-Image-2.5 Sunburst で作り、その絵を Kling 3.0 に渡しました。絵を作るときは、ロボットの設定画を参考の画像として一緒に渡しています(1536×1024)。

タイトルの場面の絵(GPT-Image-2.5 Sunburst・参考の画像 = ロボットの設定画):

ゲームのタイトルの場面の絵。参考の画像のロボット(白とだいだい色のたまご形の体・黒い顔の画面に水色の丸い目が 2 つ・緑のアンテナ)が、明るい芝生の小さな庭のまん中に立ち、空を見上げている。まわりに、青く光る結晶のかたまりが 5 つ、地面から生えている。背の低い丸い木が 2 本。晴れた空と白い雲。画面の上 3 分の 1 は空だけにして、あとで題を重ねられるようにする。やわらかい陰影の、3D のおもちゃのような質感。文字やロゴは入れない。

クリアの場面の絵(同じ設定):

ゲームのクリアの場面の絵。参考の画像のロボット(白とだいだい色のたまご形の体・黒い顔の画面に水色の丸い目が 2 つ・緑のアンテナ)が、芝生の上で両腕を上げて喜んでいる。ロボットのまわりに、青く光る結晶のかけらが 5 つ、輪になって浮かんでいる。夕方のあたたかい光。背景は背の低い丸い木と、だいだい色から水色に変わる空。ロボットは画面のまん中。やわらかい陰影の、3D のおもちゃのような質感。文字やロゴは入れない。

タイトルの動画(Kling 3.0・5 秒・16:9 を指定・最初の場面 = タイトルの場面の絵・音なし):

ゲームのタイトルの場面の動画。最初の場面の絵のまま、カメラがゆっくり前へ寄っていく。ロボットは空を見上げてから、こちらを向いて小さく手を振る。まわりの青い結晶が、きらきらと光る。雲がゆっくり流れる。画面の上の空の部分は、空のままにする。文字やロゴは入れない。

クリアの動画(Kling 3.0・同じ設定・最初の場面 = クリアの場面の絵):

ゲームのクリアの場面の動画。最初の場面の絵のまま、ロボットがその場で 2 回ぴょんぴょん跳ねて喜ぶ。まわりの 5 つの青い結晶が、ロボットのまわりをゆっくり回り、最後に明るく光る。カメラは動かさない。文字やロゴは入れない。

• 数えた 10 項目のうち、○ が 8、△ が 1、× が 1 でした。数えたのは 0.5 秒ごとのコマで、跳ねた回数はアンテナの先の高さを 1/24 秒ごとに測って数えました。
• × は、クリアの場面の最後です。4.8 秒に結晶がロボットに集まって光がはじけたあと、結晶が 4 つになりました。
• タイトルの場面の絵には、指示していない柵と遠くの山が描かれていました。動画にもそのまま残っています。
• タイトルの動画では、ロボットの目の形が 2 回変わりました(笑ったような形と、まばたきのような線)。クリアの動画でも、跳ねる前後に目が細い線の形になりました。3D のロボットの目は丸のままです。
• 届いた 2 本は 24 コマ毎秒・5.04 秒で、音は入っていません。縦横は、16:9 を指定しましたが 3:2 でした(「つまずいた所」の 6)。

音: ElevenLabs と Lyria 3.5

効果音は ElevenLabs(記録の名前は eleven-sfx)、BGM は Lyria 3.5 で作りました。効果音の文は、YOBITSUGI AI の道具の説明に「英語のほうが当たりやすい」とあるので、英語で書きました。

拾う音(長さ 1 秒を指定・意味: 光る結晶を拾うときの、明るく短い魔法のような音。きらめき 1 回・音楽と声なし):

A bright, short magical chime when picking up a glowing crystal in a cute video game. Single sparkle, clean, no music, no voice.

ジャンプの音(0.6 秒を指定・意味: 小さなロボットが跳ねる、やわらかくはずむ短い音):

Short cartoon jump sound for a small robot in a cute video game, soft springy boing, no music, no voice.

はじめる音(1 秒を指定・意味: 「はじめる」のボタンの、2 音で上がるやわらかい確認の音):

Short soft user interface confirm sound for a cute game start button, two-note rising chime, no voice.

クリアの音(3 秒を指定・意味: ステージクリアの、鈴とマリンバの明るく短いファンファーレ):

Short cheerful victory fanfare jingle for a cute video game stage clear, bells and marimba, ends cleanly, no voice.

BGM(Lyria 3.5・長さは指定なし):

ブラウザで遊ぶ小さな 3D の箱庭ゲームの BGM。明るくのんびりした曲。マリンバ、木琴、やわらかいシンセのパッド、軽い打楽器。テンポは 100 ほど。歌は入れない。くり返して流せるように、始まりと終わりを同じ調子にする。

編集部は音を聞いていません。長さと大きさを測った数だけを書きます。

• 無音は -50 dB より小さい所、LUFS は人の耳の感じ方に合わせた大きさの単位です(ffmpeg で測定)。
• はじめる音だけ、いちばん大きい所がほかの効果音より 8〜12 dB 小さく届きました(LUFS では 18〜23 小さい)。

組み合わせるときにつまずいた所

1. 3D の向きと大きさがそろわない

• Tripo の 2 個は、顔や正面が +X の側を向いていました。glTF(GLB の決まり)の正面は +Z なので、そのまま置くと横を向きます。Meshy の木は +Z が正面でした。
• 大きさも違いました。Tripo は高さが 1.0、Meshy は約 1.9 です。どれも中心が原点にあるので、そのまま置くと半分が地面に埋まります。
• 直し方は、素材ごとに回す角度とゲームの中の高さを決め、読み込んだあとに底を地面に合わせる、です。

// AI が作った 3D は、向きと大きさがそろっていない。ここでそろえる
const MODELS = {
  hero: { file: 'assets/hero.glb', yaw: -90, height: 1.3 },       // Tripo: 正面が +X・高さ 1.0
  crystal: { file: 'assets/crystal.glb', yaw: -90, height: 1.0 }, // Tripo: 正面が +X・高さ 1.0
  tree: { file: 'assets/tree.glb', yaw: 0, height: 3.8 },         // Meshy: 正面が +Z・高さ 約 1.9
};

2. そのままでは重い(3 個で 106.7 MB)

• 届いた GLB は、ロボット 44.1 MB、結晶 42.7 MB、木 19.9 MB でした。三角形は合わせて約 343 万です。ブラウザで読み込むには大きすぎます。
• Blender 5.2.2 を画面なしで動かし、面を間引く機能(Decimate)で、ロボット 19,999・結晶 3,999・木 12,000 の三角形に減らしました。絵は 2048 画素から 1024 画素(色)と 512 画素(ほか)に縮め、JPEG にしました。3 個で 1.61 MB です。
• 表面の凹凸の絵(ノーマルマップ)は外しました。元の細かい面に合わせて作られた絵なので、面を減らすと合わなくなるためです。

3. 面を減らしすぎると、絵に細い線が出る

• 減らしたあとの結晶と木を拡大すると、届いた 3D には無い黒い線がありました。
• 絵を縮めずに面だけ減らしても、同じ所に線が出ました。三角形を 4 万に増やすと消えたので、原因は面の減らしすぎです。
• ゲームの画面では結晶が小さく映るので、4,000 のまま使いました。近くで見せる物は、三角形を多めに残すほうが安全です。

4. ページの CSP で、3D の絵が読み込めない

1 回目の確かめでは 3D が真っ白に表示され、Chrome のコンソールにエラーが 20 件出ました。

• CSP(ページが読み込める先を決める、セキュリティの決まり)で、fetch で読める先(connect-src)に blob: が入っていないと起きます。公開する先と同じ CSP を付けたサーバーで確かめて、公開の前に気づきました。
• three.js の GLTFLoader(GLB を読む部品)は、多くのブラウザで、GLB の中の絵を blob: の URL にして fetch で読みます。ここが止められていました。
• GLTFLoader の中身は書き換えず、プラグインで、絵を <img> で読む TextureLoader に替えて直しました。CSP の img-src で blob: が許されていれば読めます。

const gl = new GLTFLoader();
// CSP で blob: の URL を fetch で読めないときは、<img> で読む TextureLoader に替える
gl.register((parser) => {
  parser.textureLoader = new THREE.TextureLoader(parser.options.manager);
  parser.textureLoader.setCrossOrigin(parser.options.crossOrigin);
  parser.textureLoader.setRequestHeader(parser.options.requestHeader);
  return { name: 'hda_img_textures' };
});

5. 空の画像のつなぎ目

• ゲームの空は、画像を丸い天井の内側にぐるりと 2 回貼っています。左右の端が合わないので、そのままでは継ぎ目が見えました。
• three.js の MirroredRepeatWrapping(絵を鏡に映した形でくり返す設定)にすると、端どうしが同じ画素になり、継ぎ目が消えました。

6. 動画の縦横と、音の長さと大きさ

• 動画: 16:9 を指定しましたが、3:2 で届きました。画面いっぱいに広げて流すので、スマホの縦の画面では左右が大きく切れます。
• 効果音: 後ろに 0.2〜1.4 秒の無音がありました。ゲームでは無音を切り、いちばん大きい所を -3 dB にそろえました。はじめる音は 11.4 dB 大きくしています。
• BGM: 174.6 秒の曲で、165 秒ごろから小さくなって終わり、最後の 2.6 秒は無音でした。「くり返して流せるように」と書きましたが、そのままくり返すと、つなぎ目で音が途切れます。ゲームでは後ろの無音を切り、最後の 1.5 秒を小さくしました。

かかった時間とクレジット

• クレジット: 合計 392.6 です。3D 3 個で 210.6、動画 2 本で 147.4 と、この 2 つで 91% でした。画像 7 枚は 18.5、音 5 つは 16.1 です。
• 生成を待った時間: 4 回に分け、同時に 2〜5 件ずつ流して、合わせて 4 分 48 秒です(1 件ずつの秒の合計は 649.5 秒)。いちばん長かったのは、ロボットの 3D の 164.7 秒です。
• 編集部の作業: 作り始めてから、PC とスマホの大きさでクリアまで動くのを確かめるまで、約 1 時間でした(生成を待つ時間を含み、図と記事を書く時間は含みません)。Claude Code での作業の時間で、人が手で作る時間とは違います。
• 確かめ: three.js を縮めた版に替えたあとも、PC とスマホの大きさでクリアまで動きました。クリアまでは、ゲームの中の時間で 14.0 秒(PC)と 14.6 秒(スマホの大きさ)です。GPU の無い Chrome では 1 秒に 2 コマほどしか描けず、実際には 85 秒ほどかかりました。実際の端末での速さは測っていません。

気をつけること

• 1 回ずつの結果です。 同じ文で作り直したときに同じ物ができるかは、試していません。
• 実際のスマホの端末では試していません。 Chrome でスマホの大きさ(390×844 など 5 つ)とタッチの操作を再現して確かめました。
• 素材の使い方の決まりを確かめます。 YOBITSUGI AI の利用規約では、作った物の権利は利用者にあり、運営会社は権利を主張しません。各 AI 事業者の決まりにも従います。各社の公式のページで確かめたのは、次の範囲です(2026年10月15日)。
  • Tripo: 有料の利用者は商用に使え、著作権も利用者にあります。元にした画像に著作権の争いが無いことは、利用者が確かめます。
  • Meshy: 有料の利用者は、作った物を所有します。無料のプランでは CC BY 4.0 です。
  • ElevenLabs の効果音: 商用に使えます。無料のプランでは elevenlabs.io の表記が要ります。
  • Lyria: Gemini API の規約では、Google は作った物の所有権を主張しません。曲には、聞いても分からない電子の透かし(SynthID)が入ります。
• Tripo・Meshy・ElevenLabs の説明は、料金のプランごとの決まりです。 ほかのサービスを通して作った場合については書かれていませんでした。GPT-Image-2.5 Sunburst と Kling の決まりは、この記事では確かめていません。公開するゲームに使う前に、各社の決まりを確かめてください。
• three.js は MIT ライセンスです。 配るときは、ライセンスの全文を一緒に置きます。

まとめ

• 生成 AI の素材 17 件(392.6 クレジット)と、編集部のプログラムで、ブラウザで遊べる 1 面ができました。
• 手間がかかったのは組み合わせる所で、3D の向きと大きさ、重さ、面の減らしすぎ、ページの CSP、空のつなぎ目を、プログラムと Blender の側で直しました。
• 遊べるページは ひかりの庭 です。