今回は、Three.jsを使ってブラウザ上で動くAIMLAB風のエイム練習ゲームを制作しました。
このゲームは四角いフィールドの中にランダムに現れるターゲットをクリックし、ターゲットのサイズによってスコアが変動する仕様です。
制限時間は20秒で、マウスでカメラ操作も可能になっています。
「作った」と言っても私自身がコーディングしたわけではなく、GPT-5とKiroの2つのAIに作ってもらいました。
ゲームの仕様
- 四角いフィールド内でターゲットがランダム出現
- ターゲットは球体（SphereGeometry）、クリックするとランダム移動
- クリックしたターゲットのサイズによってスコアが変動（小さいほど高得点）
- 制限時間20秒
- マウス操作でカメラを自由に回転・ズーム可能（OrbitControls）
- マウスカーソルは非表示で、画面中央に小さい白い点（ドット）表示
制作工程
GPTで簡易的なプロトタイプを作る
- まず、私が書いた適当なプロンプトを使用し、GPT-5に簡易的な骨組みを作ってもらいました。この時点で既にある程度理想に近いものができています。
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
簡易的なゲームに改良を施す
- 四角い部屋の中でターゲットが出現するように変更
- マウス操作でカメラを動かせるように改良
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
作業を踏まえてプロンプトを作る
- Kiroに指示するための詳細なプロンプトをGPTで作成し、仕様を整理しました。
あなたはフロントエンド開発エキスパートです。
以下の仕様に沿った3Dブラウザゲームを作るためのコードを作成してください。
【ゲーム概要】
- AIMLAB風のターゲット練習ゲーム
- プレイヤーはマウスでターゲットをクリックしてスコアを稼ぐ
- 制限時間は20秒
【描画・環境】
- Three.jsを使用（CDNは以下URLを使用）
<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>
- CanvasではなくThree.jsのWebGLで3D描画
- ターゲットは球体（SphereGeometry）、部屋の中でランダム位置に出現
- カメラはOrbitControlsでマウス操作可能
【ターゲット・スコア仕様】
- クリックしたターゲットのサイズに応じてスコアが変動
- 小さいターゲットほど高得点
- ターゲットはクリック時にのみランダム移動
- 同時に1個だけ出現
【ユーザーインターフェース】
- 画面上にスコアとタイマーを表示
- 制限時間20秒が終了したらゲーム終了
- マウスカーソルは非表示にし、画面中央に小さい白い点（ドット）を表示
- ゲームはクリック精度トレーニング用で、クロスヘア型もオプションで考慮可
【追加要件】
- 外部APIは一切使用しない
- 純粋にブラウザだけで完結
- ウィンドウリサイズ対応
- アニメーションループはrequestAnimationFrameで描画
上記の仕様を満たす 最小限かつ動作確認可能なHTML + JSコードを生成してください。
可能であれば、後で複数ターゲットや自動移動に拡張できる構造にしてください。
作成したプロンプトをKiroに投げ、仕様書を作成
- プロンプトを元にKiroがゲームの仕様書を生成
仕様書をもとにコーディング
- Three.jsを用いてゲームのコーディングを実施
- 部屋・ターゲット・タイマー・スコア・カーソルなどの要素を実装
完成したゲームのバグや修正点をKiroに伝え、改良
- マウスカーソルを小さい点に変更
- カメラ操作（OrbitControls）バグ修正
- リサイズ対応やタイマー終了処理の修正
完成
- すべての要素が揃い、エイム精度トレーニング用の3Dゲームが完成
※難易度高めです
See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.
まとめ
ポッと出のアイデアをサクッと形にする上で、AIはとても便利。
GPTやKiroを活用することで、アイデアの具体化、仕様書作成、バグ修正までスムーズに進められました。
AIをうまく補助として使うことで、私のようなゲーム制作未経験者でも3Dブラウザゲーム開発が可能になります。みなさんもぜひ試してみてください!