はじめての三次元ブラウザクラフトを作った話（GPT-5 Codex と一緒に）

この記事自体もGPT-5 codexでほぼ一発生成したものです。

これまでゲーム開発や 3D のオブジェクトを扱うコードはほぼ未経験でしたが、GPT-5 Codex を相棒に、Three.js でミニマルな「クラフト風」ブラウザアプリを作ってみました。ブラウザだけで動き、ローカルサーバを立てればすぐ試せます。

ここで試せます。
https://reouno.github.io/tscraft/

github: https://github.com/reouno/tscraft?tab=readme-ov-file

何ができるか

• 移動と視点: WASD で移動、マウスで視点、スペースでジャンプ。画面クリックでポインターロック、中央に簡易クロスヘア。
• ブロック操作: 右クリックで配置、左クリックで削除。リーチは約 5m。
• ブロック種の切替: 1 土、2 石（丸石風）、3 オーク（板材風）。面ごとに簡易タイルテクスチャを貼っています。
• 見た目: 深い緑の草フィールド（タイル繰り返し）、シンプルな環境光＋平行光で陰影を追加。
• セーブ/ロード: LocalStorage に自動保存（3 秒デバウンス）。E で JSON エクスポート、I で JSON インポート、C で削除確認→削除。

中身（技術メモ）

• Three.js は CDN（v0.154.0）から読み込み。TypeScript のエントリは main.ts、ビルド成果物は main.js（module: none で <script> 直読み）。
• シーン構成は極力シンプルに、1 ファイルで管理。補助関数は成長に合わせて抽出する方針。
• ブロックは整数グリッドに配置し、AABB で簡易コリジョン。レイキャストで対象を選び、配置/削除を行います。
• テクスチャは Canvas で都度生成（例: 土の粒、丸石のブロブ、板目の木目、草の斑点＋短い刈り草）。RepeatWrapping と NearestFilter、tileRepeat で繰り返しを制御し、端の継ぎ目は「ラップ描画」で目立たないようにしています。
• セーブはバージョン付き JSON（player と blocks:[x,y,z,type]）。LocalStorage へ保存し、E/I でポータブルに。

動かし方

• ローカルサーバ起動: python3 -m http.server 8080
• ブラウザで開く: http://localhost:8080/
• TypeScript ビルド（必要なら）: npx tsc -p .

GPT-5 Codex に助けられたこと（というかむしろ詰まったところ）

• コードはほぼ全てcodexで生成したので自分では中身をほとんど見ていない。
• 「前進/後退」の符号バグの切り分け（カメラ向きと入力の整合）。
• 継ぎ目のないタイル用の小さな Canvas テクスチャ生成（端ラップ、フィルタ設定）。
• 保存の設計（デバウンス自動保存、手動エクスポート/インポート、クリア時の再保存抑止）。

作ってみての感想と今後

• 3D/ゲーム未経験でも、最小構成を積み上げればカタチになる。レイキャストと AABB は強力で、まずは「シンプルに確実に動く」実装が正解だと実感しました。
• 今後は、草ブロックの面別テクスチャ（上: 草、側面/底: 土）、軽量なアウトライン、チャンク分割、IndexedDB への移行などを試したいです。

（ソースは GitHub に公開済み。ローカルでも数分で試せるので、ぜひ遊んでみてください！）