HTML5 遊戲開發:3D 碰撞偵測

我們剛看過了〈2D 方塊地圖〉一文,也分享了 MDN 上的幾篇文章。接著來談談幾乎是所有 3D 遊戲必備的技術 ── 3D 碰撞偵測 (Collision detection)。我同時再提供 MDN 上的其他幾篇遊戲開發文章!希望能帶給你靈感並強化你的技巧!

在 3D 遊戲開發過程中,「包圍體 (Bounding volume)」就是用於決定任兩個物體是否碰撞的常用技術之一。包圍體的技術包含 1). 以虛擬物體包裹遊戲物件,以及 2). 套用碰撞演算法描述這些物體的運動與互動。 即便是具備隨機又複雜外觀的物體,也能透過這種方式而輕鬆又快速的偵測碰撞。

說到包圍體的使用條件,最受歡迎的就是「Axis-Aligned Bounding Boxes (AABB)」。根據遊戲特色的不同,有時也會採用球體 (Sphere)。下圖就是以 AABB 包裹的 3D 物件:

Screen-Shot-2015-10-16-at-15.11.21

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 標準、高品質的程式碼、是否易於取得、遊戲開發等的大小事。

更多 Belén Albeza 的文章……

 

 

原文連結:HTML5 games: 3D collision detection

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *