第1章虛擬現實基礎

1.1增強現實介紹

1.1.1增強現實概念

1.1.2增強現實技術特點

1.1.3增強現實技術發展

1.1.4增強現實技術分類

1.1.5增強現實的技術原理

1.2虛擬現實介紹

1.2.1虛擬現實概念

1.2.2虛擬現實的特性

1.2.3虛擬現實技術發展

1.2.4虛擬現實技術分類

1.2.5虛擬現實技術原理

1.3混合現實介紹

1.3.1混合現實概念

1.3.2混合現實內容設計

1.3.3混合現實中的交互設計

1.3.4混合現實體驗舒適度

1.3.5混合現實內容設計的視覺表現

1.4虛擬現實硬件設備介紹

1.4.1PC端頭顯設備

1.4.2一體式頭顯設備

1.4.3移動端頭顯設備

1.5增強現實硬件設備介紹

1.5.1微軟HoloLens智能眼鏡

1.5.2Magic Leap

1.5.30glass AR

1.5.4HoloMax全息交互繫統

1.5.5XMAN智能眼鏡

第2章WebXR介紹

2.1WebGL介紹

2.1.1基本概念

2.1.2發展歷史

2.1.3應用場景

2.2WebXR技術發展與現狀

2.2.1W3C標準化組織

2.2.2曇花一現的WebVR API

2.2.3WebXR API介紹

2.3Three.js框架介紹

2.3.1基於Python的Web服務器搭建

2.3.2基於NPM的Web服務器搭建

2.4AFrame框架介紹

2.5Babylon.js引擎介紹

2.5.1初始化網頁

2.5.2初始化3D場景

2.5.3創建三維物體

2.5.4修改物體的材質

第3章WebXR開發基礎

3.1一行代碼讓網站支持3D和VR

3.2場景創建

3.2.1快速創建場景

3.2.2場景創建API說明

3.3場景燈光

3.3.1燈光的類型

3.3.2燈光顏色的設置

3.3.3燈光開關和調光器

3.4場景陰影

3.4.1陰影生成

3.4.2透明物體和陰影

3.4.3燈光與陰影的關繫

3.4.4體積光散射後處理

3.5場景交互

3.5.1如何在場景中進行交互

3.5.2鍵盤的交互

3.5.3鼠標的交互

3.6相機

3.6.1通用相機

3.6.2軌道相機

3.6.3跟隨相機

3.7動畫

3.7.1設計動畫

3.7.2序列動畫

3.8音頻

3.8.1創建音頻文件

3.8.2通過事件觸發音頻播放

3.8.3音樂屬性

3.8.4通過ArrayBuffer來加載音頻文件

3.8.5通過資源管理器加載音頻文件

3.9相機和網格

3.9.1相機的行為

3.9.2網格的行為

3.10資源管理

3.10.1SceneLoader.Append

3.10.2SceneLoader.Load

3.10.3SceneLoader.ImportMesh

3.10.4SceneLoader.ImportMeshAsync

3.10.5SceneLoader.LoadAssetContainer

3.10.6SceneLoader.ImportAnimations

3.10.7SceneLoader.AppendAsync

3.10.8AssetsManager

3.10.9使用加載進度

3.11材質

3.11.1材質的創建

3.11.2漫反射

3.11.3環境光顏色

3.11.4透明顏色

3.11.5紋理

3.11.6透明紋理

3.11.7顯示模型線框

第4章中國傳統建築三維展示案例開發

4.1基於VSCode開發環境配置

4.1.1安裝VSCode開發工具

4.1.2Live Server插件安裝

4.1.3在VSCode中調試代碼

4.2PBR材質的使用

4.2.1PBR材質簡介

4.2.2PBR基礎理論

4.2.3PBR材質的制作

4.2.4使用Blender導出glTF模型

4.2.5在Sandbox中查看模型效果

4.3模型導出

4.3.1常見的3D模型格式

4.3.2從3ds Max軟件導出glTF模型

4.3.3從Blender導出glTF模型

4.3.4在Sandbox中查看glTF模型

4.4加載頁面

4.4.1基礎頁面創建

4.4.2創建加載頁面

4.5場景加載

4.5.1設置Canvas

4.5.2初始化引擎

4.5.3創建場景Scene

4.5.4遊戲循環

4.5.5相機的創建

4.5.6創建天空盒

4.5.7創建環境燈光

4.5.8模型加載

4.6場景交互

4.6.1UI的創建

4.6.2音樂的創建和控制

4.6.3場景中物體的交互

第5章WebAR解決方案介紹

5.1基於Kivicube的WebAR應用開發

5.1.1項目創建

5.1.2場景創建

5.1.3創建場景內容

5.1.4創建場景交互

5.1.5場景保存與分享

5.2基於EasyAR的WebAR應用開發

5.2.1EasyAR WebAR簡介

5.2.2EasyAR WebAR快速入門

5.2.3EasyAR Web3D模型動畫要求

5.3基於開源的AR.js應用開發

5.3.1圖像跟蹤案例

5.3.2基於位置的AR案例

5.3.3基於標記的AR案例

第6章Web遊戲非遺慶全運開發案例

6.1案例介紹

6.2Cocos Creator引擎

6.2.1Cocos Creator引擎簡介

6.2.2引擎安裝

6.2.3使用Dashboard

6.2.4Hello World

6.3場景創建

6.3.1場景資源

6.3.2節點和組件

6.3.3坐標繫和節點變換屬性

6.3.4使用場景編輯器搭建場景圖像

6.4遊戲動畫

6.4.1動畫幀

6.4.2Sprite

6.4.3動畫片段

6.4.4SpriteAnimation類的實現

6.4.5編輯SpriteAnimation

6.5遊戲UI交互

6.5.1UI入門

6.5.2Canvas組件

6.5.3UI變換組件

6.5.4Widget組件

6.5.5Button組件

6.6遊戲發布

6.6.1熟悉構建發布面板

6.6.2構建選項介紹

參考文獻

本書從AR/VR理論知識點到專題技術知識點(場景、燈光、材質等)都做了非常詳細的講解，將晦澀的專題技術知識點以通俗易懂的語言進行描述，並且引入相應的小規模案例，便於讀者在動手實操的過程中更加輕松地理解它們。對於之前沒有接觸過HTML CSS開發的讀者，本書還提供了在線圖形化開發WebXR應用的詳細步驟(詳見第5章)，通過一些簡單的操作步驟就能夠制作出效果不俗的應用進行發布和預覽，因此對於初學者非常友好。

本書內容

全書分為6章，其中第1章為概述部分，第2章和第3章為WebXR技術的框架部署、代碼規範和開發組件的講解，第4~6章為WebXR開發綜合案例。各章主要內容介紹如下。

第1章主要介紹了虛擬現實、增強現實以及混合現實這3種技術的概念、技術特征、實現的相關原理以及實現所需的相關硬件設備環境，讓讀者從感性認識方面出發了解這3種技術的相關知識。

第2章介紹了WebXR技術的發展以及目前主流WebXR技術開發使用的框架。本章講解了Three.js、AFrame以及Babylon.js這3種框架的使用方法、代碼編寫風格以及小型案例實現的效果。

第3章是正式步入WebXR開發的前置章節，重點講解了在Babylon.js框架下WebXR開發中所必須掌握的模塊創建方法，包括場景、燈光、相機、動畫、音頻、材質等的創建，並且針對其中的代碼以及API的使用做了詳細的說明。

第4章以中國典型傳統建築三維展示項目為例，詳細介紹了WebXR開發環境搭建、案例介紹與工程創建以及場景創建、場景交互的開發步驟和方法，使讀者能夠深入理解並掌握商用WebXR案例的開發流程。

第5章介紹了在線圖形化開發WebXR應用的具體步驟，對於編程基礎較弱的初學者非常友好，讀者可以根據書中的內容在圖形化界面中完成WebXR開發的每一步操作，並最終完成測試與預覽。

第6章以目前國內WebXR商業項目開發主流使用的Cocos Creator引擎作為開發工具，以第十四屆全運會為背景，通過Cocos Creator引擎開發一款帶有皮影戲風格的全運會比賽項目的WebXR遊戲，讓使用者在體驗WebXR遊戲的同時，還能夠了解全運會各比賽項目的比賽規則，可以說本章案例非常具有代表性，也非常接近真實商業項目的規模。

開發環境

本書每個章節所使用的開發工具可能都不一樣，但是，隻要開發人員所使用的開發主機硬件環境滿足如下相關配置要求即可。

序號
配置項
配 置 要 求

1
CPU
2核4線程 1.8GHz及以上
2
內存
4GB及以上
3
操作繫統
Windows 7/10/11

4
硬盤
500GB及以上(繫統盤預留至少15GB剩餘空間)
5
網絡
有線或者無線網絡(僅限於需要在官方下載資源包的情景)

6
顯卡
入門級的獨立顯卡及以上

配套資源

 教學課件、程序代碼和素材資源包(約1GB)等，掃描下方二維碼或者到清華大學出版社官方網站本書頁面獲取。

配套資源

 本書還提供一些網絡上的輔助學習視頻，需關注微信公眾號觀看，具體獲取方式見配套資源中的說明。

致謝

作者要特別感謝對本書寫作有幫助的所有人，正是他們的幫助以及悉心指導纔讓作者有了完成本書的信心。

首先，感謝陝西加速想像力教育科技有限公司，該公司建立的AR/VR訓練營為廣大AR/VR開發愛好者提供了非常豐富的學習資源，並對本書的一些實現思想、素材等提供了適當的參考。同時，張克發經理以及公司技術人員在作者寫書的過程中積極參與，並且提供了非常多的指導和幫助。

其次，感謝各WebXR技術官方網站提供的開源WebXR開發框架(Three.js/AFrame/Babylon.js/AR.js/Cocos Creator等)以及相關的開發手冊，使作者在本書的每個章節論述相關的理論知識點或者是重點操作說明時能夠有章可循。官方開發手冊不僅是編寫本書的重要參考依據，同時也是WebXR開發初學者必須關注的資源。

期望本書的問世能夠激發更多WebXR開發愛好者和初學者的學習興趣，降低WebXR開發學習的入門門檻。

在本書的編寫過程中，得到了省部共建藏語智能信息處理及應用國家重點實驗室、青海省物聯網重點實驗室、高原科學與可持續發展研究院、青海師範大學計算機學院領導和師生的熱心支持，書中使用了課題組的大量資料，在此致以誠摯的謝意。

另外，書中各部分教學內容得到第二批新工科項目“面向區域的多學科交叉融合新工科人纔培養探索與實踐”(編號： EDXKJC20200527)、青海省科技廳重點研發與轉化計劃項目(編號： 2022SF165)、國家重點研發計劃“公共文化服務裝備研發及應用示範”(編號： 2020YFC1523300)和青海師範大學校級教學研究項目(編號： qhnujy2021102)創新基金的資助。

由於作者水平有限，書中難免存在不足之處，敬請讀者批評指正。

謝平2023年3月於西寧