使用 THREE.js 和 CANNON.js 開發一個3D 賽車遊戲

Contents

使用 CANNON.js 物理程式庫和 WebGL 程式庫、THREE.js 輕鬆創建賽車遊戲。

從這 2 小時的課程，你會學到

你將有 THREE js 程式庫的知識
你將對物理引擎的工作原理有一定的瞭解。特別是 CANNON js
你將知道如何調整你的資產運用 CANNON RayCastVehicle 類( class )
你將知道如何使用物理引擎的位置和旋轉資訊，並將其應用到你的資產上
你將知道如何在你的場景使用對撞機( colliders )，以防止你的汽車駕駛跑出你的 3D 環境

要求

你需要了解基本的 Javascript
所需的工具是一個好用的文字編輯器和由你選擇的 3D 應用程式，可以輸出 FBX 檔案，比如 Blender

課程說明

建立一個能在瀏覽器也能在行動裝置上執行的賽車遊戲從來沒有像現在這麼容易了。使用兩個開放原始碼庫 THREE.js 和 CANNON.js ，這個課程將帶你通過你需要知道的步驟，並建立一個完整的賽車遊戲。在你學習的路上

如何建立你的開發環境
如何在遊戲中使用免費和低成本的資產。
如何編輯這些資產，以便與 THREE.js 和 CANNON.js 程式庫( libraries )作用。
如何使用 THREE.js 將 3D 新增到 HTML 頁面。
THREE.js lights、照相機和網格的基本知識。
包括剛體( rigid bodies )在內的 CANNON.js 程式庫的基礎。
如何使用由作者建立的 CannonDebugRenderer 或使用 CannonHelper 類( class )來除錯你的物理特性。這兩個課程的資源都包括在內。
如何使用 CANNON.RayCastVehicle 類( class )為車輛加入懸掛( suspension )和完全運作的車輪( full working sheels )。
如何將自己的資產應用到 RayCastVehicle 並新增對撞機，這樣它就會撞上你的內容。
如何將響應式圖形使用者介面( GUI )新增到遊戲中

課程包括賽車比賽的資產，如課程圖示和免費預覽的影片。作者製作的 3D 遊戲已得過許多獎。跟著一位已經創作了 30 多年的專家學習。我們將開發的遊戲，允許玩家選擇車身、引擎、排氣和輪子。遊戲涉及駕駛一輛遙控汽車繞過花園軌道。

這是提高你的 JavaScript 技能的一個很好的方法。所有程式碼都使用最新的 ES6 樣式，在整個程式碼中使用類( classes )。

目標受眾

如果你對開發在瀏覽器，包括在行動裝置中能運作的 3D 遊戲感興趣
如果你有興趣瞭解物理引擎是如何工作的，同時創造一個有趣的遊戲
如果你想知道如何在遊戲中新增響應式圖形使用者介面

講師簡介

Nicholas Lever 遊戲開發者

我在 1980 年以卡通動畫師的職業開始工作。在 1982 年買了一台 Sinclair ZX81，開始轉做一個全職的程式設計師。ZX81 很快就被 Sinclair Spectrum 取代，一個 Z80 處理器和一個48K 的大容量 ram 讓它成為一款更好的電腦來開發遊戲，我用 Sinclair Basic 和 Assembler 開發了一些遊戲。而後，Spectrum 被換成了 Commodore Amiga，我開發了更多的遊戲，發佈到共享軟體市場。接著我轉而使用 C。在這個階段，它基本上是一種嗜好。我的正職工作仍在動畫廣告。

我在 90 年代初最後買了一臺電腦，並建立了一個精靈程式庫( sprite library ) ActiveX 控制元件，並且寫了我的第一本書，目的是讓設計師進入程式設計。在 90 年代中期，Flash 和我現在運營的公司 Catalyst Pictures 以創造遊戲而聞名。

從那時起，我的大部分工作生涯都在建立遊戲，首先是在 Flash 和 Director 中，因為導演釋出了第一個可廣泛使用的 3D 庫，該庫將使用一個外掛在瀏覽器中執行。

近年來，遊戲開發涉及到使用 HTML5 和 Canvas。使用自定義程式碼和各種程式庫( libraries )。一個特別的偏好是使用最新版本的 Adobe Flash，現在稱為 Animate，它向 Javascript 程式庫 Createjs 輸出。

我為 BBC、約翰遜和嬌聲( J&J )、德勤( Deloitte )、火星( Mars )公司和其他許多藍籌客戶工作過。我經營了 30 多年的公司，得過許多獎項，並兩次被提名 BAFTA，在英國相當於奧斯卡獎。

在過去的 20 年裡，我一直感到震驚的是，要找到優秀的開發人員是多麼的困難，我決定為此做點什麼，而不僅僅是抱怨。我為 9 – 13 歲的孩子開設了一個 CodeClub，並打算為 Udemy 開發一些課程，希望能夠激勵和教育新的開發者。

英文字幕：有

想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To

點選這個✨優惠連結✨ 課程特價 | Udemy 永久擁有課程 NT390 起( 在電腦瀏覽器登入，點選“優惠連結”後再回想要的課程介紹中點選“報名參加課程”即可取得）
Udemy 現在越來越多課程有中文字幕，請參考 Soft & Share 中文線上課程
手機上點選優惠連結看到的價格比電腦上看到的貴
＄代表當地貨幣, 如在台灣為 NT
點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上，請稍等刷新或重新點選就會出現