はじめに
今回は Three.js を使って、ブラウザ上で遊べる 3D ピンボールゲームを作りました。
ボールがフリッパーや障害物（バンパー）に当たって跳ね返る仕組みも実装しています。
フリッパー操作：左右の矢印キーで操作
ボール挙動：重力、跳ね返り、バンパー反射
障害物配置：三角形配置で自然な弾き方
実装のポイント
1. Three.jsの基本セットアップ
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer({ canvas });
Scene：3D空間
Camera：視点
Renderer：描画担当
2. 台と壁の作成
const boardGeo = new THREE.BoxGeometry(12,0.5,20);
const board = new THREE.Mesh(boardGeo, boardMat);
scene.add(board);
ボールが落ちないように枠（Boundary）を設置
壁に当たると速度を反転させることで跳ね返りを実現
3. ボールの物理処理
let velocity = { x: 0, y: -0.02, z: 0.05 };
ball.position.x += velocity.x;
ball.position.y += velocity.y;
ball.position.z += velocity.z;
velocity を管理してX/Y/Z方向に動かす
重力や壁との衝突で反転、バンパーやフリッパーで跳ね返る
4. フリッパー操作
window.addEventListener("keydown", (e) => {
if (e.key === "ArrowLeft") flipperLeftRot = 0.6;
});
キー入力でフリッパーの角度を変化させる
衝突判定でボールを跳ね返す
5. 衝突判定
バンパー：球体同士の距離を計算し跳ね返す
フリッパー：距離と方向ベクトルを使い速度を反射させる
const dx = ball.position.x - flipper.position.x;
const dz = ball.position.z - flipper.position.z;
const dist = Math.sqrt(dx*dx + dz*dz);
動画やGIFで動きを見せるとわかりやすい
ボールがフリッパーで跳ね返る様子
バンパーに当たってX/Z方向に反射する様子
まとめ
今回のピンボールゲームでは：
Three.js の 基本操作（Scene, Camera, Mesh）
物理的衝突判定（距離計算・法線ベクトルで速度反射）
フリッパー操作（キーボード入力による角度制御）
が学べます。
次のステップとして：
複数ステージ作成
得点システム追加
障害物の追加（スロープ、板、スピナー）
これらを実装予定です。
