iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Modern Web

WebXR未來新視界:Babylon.js打造Web的VR/AR/XR體驗 系列

在AI浪潮席捲全球之際,元宇宙、AR、VR、XR等相較為低調,但其技術發展腳步持續在前進。本系列文章將帶從近期的XR世界的發展,從基礎概念到實戰應用,一步步深入探索。
將運用Babylon.js淺談3D世界的基礎實現WebXR,接著深入探討XR開發的核心要點。最後將透過React與Babylon.js的結合實例,展示如何以現代前端技術,打造出高效且有趣的XR體驗。

參賽天數 25 天 | 共 25 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day11] 用Babylon.js基礎模型組裝模型時常用的操作(Feature - 單元二)

上篇有提到模型來源有兩種:引入外部模型 或 用基本模型去組裝。主要會用引入外部模型的方式。那基礎模型的通常什麼時候用呢?在進行開發測試階段的時候,會先專注於核心...

DAY 12

[Day12] 讓世界動起來:Babylon.js 的基本動畫,讓車子動起來(Feature - 單元三)

Feature單元三 Village Animation:讓3D世界動起來 所謂動畫我們知道是由一幀幀(frame)所組成: Babylon.js 也像定格...

DAY 13

[Day13] 避免碰撞v.s配上Babylon.js物理引擎的碰撞與重力效果(Feature - 單元四)

Feature單元四 Avoiding Collisions:避免碰撞 剛剛加上的模型就像是個投象,並沒有實體。他們是有可能互相穿透的,而為了防止這樣的破綻,這...

DAY 14

[Day14] 用Babylon.js為3D世界加上環景背景(Feature - 單元五)

Feature單元五 A Better Environment:加上環景背景布幕 這次要來玩的是環境,在3D中一個可以利用黑白圖快速生成地形的方式。白色式高點,...

DAY 15

[Day15] 用Babylon.js灑點粒子做出噴泉和火焰(Feature - 單元六)

Feature單元六 Build a Particle Fountain:加點粒子系統 (如火焰、煙霧、雨、雪、爆炸),控制粒子的行為,讓整體更生動。 在這個單...

DAY 16

[Day16] 不同的光源和長出影子(Feature - 單元七)

Feature單元六 Light the Night:把場景從白天轉換為黑夜 我們在[Day08] 透過Babylon.js的playground 瞭解構築3D...

DAY 17

[Day17] 用網頁就能看Babylon.js的XR範例Demo - 傳送門

Babylon的官方Youtube帳號大約在一年前發布了這個用Babylon.js做出的傳送門:https://youtu.be/wmZxBMHWQAs?si=...

DAY 18

[Day18] WebXRDefaultExperience一行快速初始化WebXR好幫手

WebXRDefaultExperience 首先一定要來說說Babylon.js 提供的 BABYLON.WebXRDefaultExperience 這個強...

DAY 19

[Day19] Babylon.js WebXR 核心架構:WebXR Experience Helper 下的WebXR Session Manager

在上一篇有稍微提到這個功能,很明顯要用Babylon.js開發一定少不了WebXRExperienceHelperWebXRExperienceHelper是一...

DAY 20

[Day20] Babylon.js WebXR 高模組化功能:WebXR Experience Helper下的WebXR Features Manager

WebXR Features Manager的優點 保持向後相容性: 因許多WebXR API(如 Hit Test, Anchors)仍在快速發展中。所以...