HTML5 遊戲開發：3D 碰撞偵測
我們剛看過了〈2D 方塊地圖〉一文，也分享了 MDN 上的幾篇文章。接著來談談幾乎是所有 3D 遊戲必備的技術 ── 3D 碰撞偵測 (Collision detection)。我同時再提供 MDN 上的其他幾篇遊戲開發文章！希望能帶給你靈感並強化你的技巧！
在 3D 遊戲開發過程中，「包圍體 (Bounding volume)」就是用於決定任兩個物體是否碰撞的常用技術之一。包圍體的技術包含 1). 以虛擬物體包裹遊戲物件，以及 2). 套用碰撞演算法描述這些物體的運動與互動。 即便是具備隨機又複雜外觀的物體，也能透過這種方式而輕鬆又快速的偵測碰撞。
說到包圍體的使用條件，最受歡迎的就是「Axis-Aligned Bounding Boxes (AABB)」。根據遊戲特色的不同，有時也會採用球體 (Sphere)。下圖就是以 AABB 包裹的 3D 物件：
MDN 上有關 3D 碰撞偵測的新文章，則說明了該如何使用一般碰撞演算法搭配 AABB 與球體。不論你用何種遊戲引擎或程式語言開發遊戲，該文章應該頗有助益。
我們另有〈使用 three.js 來以包圍體進行碰撞偵測〉一文。three.js 則是 JavaScript 常用的 3D 函式庫 (進一步了解 three.js)。
另可欣賞現場展示並看看原始碼。其中一個示範即是透過物理引擎 (這裡是以 Cannon.js 撰寫而成) 執行碰撞偵測。下方則是使用 Three.js 進行碰撞偵測的示範：
希望你喜歡這些展示。如果你對 HTML5 遊戲開發的任一特定主題有興趣，歡迎留下意見讓我們知道。我們會評估並提供相關文章。
關於作者 Belén Albeza
Belén 是 Mozilla Developer Relations 團隊的工程師與遊戲開發者，關心 Web 標準、高品質的程式碼、是否易於取得、遊戲開發等的大小事。
原文連結：HTML5 games: 3D collision detection
最近上司突然要我舉辦一場記者會，還跟我說要舉辦的盛大一點，不知道各位是不是跟我一樣，不知道該怎麼做｜公關媒體操作術 - 記者會操作｜公關媒體操作術 - 記者會操作
