利用 WebXR API 和 Three.JS 將沉浸式體驗、VR 和 AR 引入瀏覽器,包括 Oculus Quest
從這 5.5 小時的課程,你會學到
- 如何輕鬆創建在瀏覽器中運行的 VR 和 AR 應用程式
- 如何使用 ThreeJS 庫來創建這些應用程式
- 如何處理控制器
- 如何用自訂模型取代控制器
- 如何創建建築演練、遊戲和培訓應用程式。
- 如何新增世界 UI
- 開發支援現實世界命中測試的 AR 應用程式
- 學習遊戲 VR 技術,例如使用控制器進行傳送以及與場景中的模型互動。
要求
- 假定具有中階 JavaScript 能力
課程說明
WebXR 將 VR 和 AR 帶到瀏覽器。該 API 背後有 Google 和 Amazon 的強大力量,因此看起來僅使用瀏覽器的沉浸式體驗將在不久的將來產生巨大的影響。 WebXR 與 Oculus 耳機配合得很好,包括 Oculus Quest 2,而 Chrome Android 瀏覽器已經支援 AR(擴增實境)和 VR(虛擬實境)體驗的 API。但 WebXR 僅利用行動裝置上的感測器,並建立如何使用這些資料的商定定義。要真正視覺化 3D 內容,您需要一個 WebGL 函式庫,而沒有比 Three.JS 更好的函式庫了。這個成熟的開源庫在全球擁有眾多用戶,並得到許多開發人員的支持。 Three.JS 在撰寫本文時版本為 118,是一個強大的、可用於生產的函式庫。最近,庫中新增了 WebXR 支援。使開發人員可以輕鬆創建身臨其境的體驗。
在本課程中,您將了解使用 Three.JS 建立 VR 和 AR 體驗是多麼容易。為了從課程中獲得最佳效果,您需要熟悉 JavaScript 編碼。不需要其他先決條件。
課程分為 10 個部分。
- 簡介 – 我介紹了 WebXR 的歷史,為剛接觸 3D 概念的人提供了基本入門知識,並向您展示了 Three.JS 網站和 WebXR 範例。
- Three.JS Primer – 適合 Three.JS 新手,幫助您快速了解該庫。
- 使用 Three.JS 介紹 WebXR – 我們認真研究您的開發環境並創建我們的第一個 WebXR 範例。
- 在 Three.JS 中使用複雜的資源 – 您為沉浸式體驗創建的大多數內容都需要複雜的資源,並且採購、編輯、加載和使用它們是第 4 節的主題。
- WebXR API – 回顧 WebXR API。
- 創建架構演練 – 在第 6 節中,我們開始透過架構演練創建沉浸式內容的現實世界範例。
- 將產品放置在房間中 – WebXR 適合在一個人的家中展示真實的產品,這就是第 7 節的主題。
- 將 WebXR 用於遊戲 – VR 非常適合遊戲,我們將在本節中介紹使用 WebXR 的遊戲的基本要素。
- 使用 WebXR 進行訓練 – 涵蓋使用 VR 進行訓練的重要主題。
- 結論 – 我們看一些 WebXR 範例來啟發您並回顧您所學到的內容。
您需要的唯一工具是程式碼編輯器,在課程中我使用 Brackets,可以在線上免費取得。該課程包括全面的資源和程式碼範例。每個程式碼範例都有兩個版本,一個供您一起編碼,另一個版本是完整的,以防您遇到問題。我將向您展示如何使用 GitHub 在安全伺服器上託管您的開發工作,以便您可以輕鬆地在耳機(例如 Oculus Quest)上測試您的工作
這會很有趣。
您可以獲得 30 天退款保證,因此您不會有任何損失,今天就開始虛擬。
評論
“這是迄今為止關於《Three JS》的最佳指南,非常有趣,並且清楚地解釋了3D 應用程式所需的部分。感謝Nik 花費時間來完成此任務!迫不及待地想看看這門課程將帶我去哪裡!“
“感謝您創建這門課程“ – Three.JS 的創建者 Doob 先生
“當他之前在 Facebook 群組中宣布這一消息時,我們所有 Nik 粉絲都在等待這一消息。他沒有讓我們失望。”
“有史以來最佳介紹/歷史影片”
“到目前為止很喜歡!課程簡潔明了。影片的長度似乎經過了優化,這意味著它們不是很長,但充滿了有關正在發生的事情的足夠資訊。提供的課程專案文件構成了寶貴的便利性在完成課程的路上。“
“它從基礎知識開始,然後進展到高級主題。我喜歡節奏和解釋。很棒的課程!”
“很棒的課程,喜歡精心挑選的例子,正是我需要的!”
“非常棒的課程,讓我驚訝的是 Nicholas 的記錄如此之好,內容也如此高品質,乾杯!”
“我以前從未聽過如此簡單而愉快的有關 Threejs 應用程式開發的敘述,現在我意識到作者是多麼有才華。”
目標受眾
- 任何有興趣利用最新的 WebXR API 創建無需額外安裝即可在瀏覽器中運行的 VR 和 AR 體驗的人。
講師簡介
Nicholas Lever 遊戲開發者
在獲得平面設計學位後,我於 1980 年開始擔任卡通動畫師。 1982 年購買 Sinclair ZX81 是向全職工程師遷移的開始。 ZX81 很快被 Sinclair Spectrum 所取代,Z80 處理器和巨大的 48K 記憶體使其成為開發遊戲的更好計算機。我使用 Sinclair Basic 和 Assembler 開發了一些遊戲。 Spectrum 被換成了 Commodore Amiga,我在共享軟體市場開發了更多遊戲,轉而使用 C。在這個階段,它本質上是一種愛好。有償工作仍然是動畫廣告。
我終於在九十年代初買了一台電腦,並完成了開放大學的數學和計算學位。我創建了一個精靈庫 ActiveX 控件並撰寫了我的第一本書,旨在讓設計師開始編輯程式。九十年代中期,Flash 出現了,我現在經營的公司 Catalyst Pictures 以創造遊戲而聞名。
從那時起,我的大部分工作時間都在創建遊戲,首先是在 Flash 和 Director 中,因為 Director 發布了第一個廣泛可用的 3D 程式庫,該庫可以使用外掛在瀏覽器中運行。
近年來,遊戲開發涉及使用 HTML5 和 Canvas。使用自定義程式碼和各種程式庫。一個特別的偏好是使用最新版本的 Adobe Flash,現在稱為 Animate,它輸出到 Javascript 程式庫 Createjs。
我曾在 BBC、Johnson and Johnson、Deloitte、Mars Corporation 和許多其他藍籌客戶。我經營了 30 多年的公司贏得了許多獎項,併兩次被提名為英國電影學院獎,相當於英國的奧斯卡獎。
在過去的 20 年裡,我一直對找到優秀的開發人員是多麼困難感到震驚,並決定為此做點什麼,而不僅僅是抱怨。我為 9-13 歲的孩子開設了一個 CodeClub,我正在為 Udemy 開發一些課程,希望能夠啟發和教育新的開發人員。我的大部分課程都涉及使用流行的開源庫 Three.JS 或 Unity 的實時 3d。我目前在開發 WebXR 遊戲和玩我的 Oculus Quest 時獲得了很多樂趣。
英文字幕:有
- 想要了解如何將英文字幕自動翻譯成中文? 請參考這篇 How-To
- Udemy 永久擁有課程 特價 NT350 起(點擊連結看更多)
- ✨年訂閱每月 NT350 🌈 悠遊 Udemy 的 26000+ 門課,最大化學習 ( 原價 NT635/月 )
- Udemy 現在越來越多課程有中文字幕,請參考 Soft & Share 中文線上課程
- 手機上點選優惠連結看到的價格比電腦上看到的貴
- $代表當地貨幣, 如在台灣為 NT
- 點選”報名參加課程”有可能因瀏覽器 cookies 轉久一點或回報錯誤而無法連上,請稍等刷新或重新點選就會出現
報名參加課程

也許你會有興趣
- Three.JS 相關線上課程
- ★英語學習地圖 – 練好英文是最大的學習槓桿
- 如何找工作學習地圖 – 找工作不要靠運氣!
- 從 Soft & Share 各種社團頻道挑選你喜歡的加入
發表迴響