Please play this game site! https://0014des.github.io/backroom2/

1. 中核となる技術・ライブラリ

Three.js（WebGL）

このゲームエンジンの中心となるライブラリです。Webブラウザで3Dグラフィックスを高速に描画する標準仕様 WebGL を、扱いやすくした JavaScript ライブラリです。

• シーンの構築
• カメラ制御
• ライト（照明）
• 霧（Fog）効果
• 3Dモデルの表示

を担当しています。

GLTFLoader

Three.js のアドオンで、.glb / .gltf 形式の3Dモデルを読み込むために使用しています。

• プレイヤー
• 敵（Bacteria / Nathan など）
• 武器（M16 / Shotgun）
• マップ

といった各種モデルの読み込みに利用されています。

SkeletonUtils

ボーンを持つアニメーション付き3Dモデル（SkinnedMesh）を**正しく複製（クローン）**するためのユーティリティです。

• 敵キャラクターを複数体出現させる際に使用

---

2. 言語とWeb標準技術

HTML5 / CSS3

ゲーム画面（Canvas）の上に UI レイヤーを重ねて表示するために使用しています。

• HP表示
• 弾薬数
• 照準
• メニュー画面

などを HTML / CSS で構築しています。

CSSアニメーション

@keyframes を使い、以下の演出を実装しています。

• ダメージを受けた際の画面エフェクト
• メニューボタンの点滅演出

Modern JavaScript（ES Modules）

<script type="module">

を使用し、最新の JavaScript 記法で実装しています。

• 変数のスコープ管理
• 外部ライブラリの import

を行っています。

---

3. ゲーム開発特有の技術・アルゴリズム

Pointer Lock API

FPSゲームに必須のブラウザAPIです。

• マウスカーソルを画面内にロック
• マウス移動を視点移動（カメラ回転）に直接変換

Raycasting（レイキャスティング）

射撃判定に使用している技術です。

• カメラ中央から見えないレイ（光線）を飛ばす
• 敵モデルとの衝突を計算して命中判定

ショットガンのような拡散射撃も、複数のレイをランダムにずらして発射することで表現しています。

無限マップ生成（チャンクシステム）

updateMapChunks 関数により実装されています。

• プレイヤー位置に応じて周囲のチャンクを生成
• 遠く離れたチャンクを削除

これにより、無限に続く Backrooms の部屋を表現しています。

簡易物理演算

物理エンジンは使用せず、座標計算による疑似的な物理処理を行っています。

• 重力（Gravity）
• ジャンプ力
• 移動速度

を毎フレーム計算しています。

3Dオーディオ（Positional Audio）

Three.js のオーディオ機能を使用しています。

• 敵の足音が距離・方向に応じて変化
• 空間的な臨場感を演出

---

4. 概要まとめ

Three.js を使ってゼロから手書きで構築された、ブラウザベースの FPS ゲームエンジンです。

Unity や Unreal Engine などの既存ゲームエンジンを使用せず、HTML / CSS / JavaScript のみで本格的な 3D アクションゲームを動作させている点が特徴です。