建站
咨詢
售后
建站咨詢
新聞中心
什么是A-Frame?
A-Frame是一個基于HTML的、可用于構(gòu)建VR和AR體驗的Web框架。從本質(zhì)上說，它是一個強大的實體框架，提供了可擴展和可重用的結(jié)構(gòu)。由于A-Frame建立在WebXR和Three.js之上，因此開發(fā)者可以不受限制地訪問JavaScript、DOM API、three.js、WebXR和WebGL。其中，WebXR是一種可用于在瀏覽器中創(chuàng)建VR和AR體驗的Web API，Three.js是一種VR/AR框架，而WebGL則負責渲染。
閬中ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
如何上手?
您可以在無需額外安裝的情況下，通過HTML文件來開發(fā)A-Frame應(yīng)用。“??A-Frame學(xué)校???”提供了豐富的A-Frame學(xué)習(xí)資源。您可以通過Glitch上的“??入門示例??”，來了解和試用A-Frame。此處的Glitch是一個適用于JavaScript和Node.js的在線式IDE。
A-Frame中的ECS
基于ECS架構(gòu)的A-Frame常被用于開發(fā)3D游戲。此處的ECS(實體-組件-系統(tǒng)，Entity-component-system)架構(gòu)是一種遵循“組合優(yōu)于繼承(composition over inheritance)”原則的模式。也就是說，每個實體都是由組件所組成，并可以鏈接到容器的對象上。作為可重用的模塊，組件可以鏈接到實體上，以向?qū)嶓w提供相應(yīng)的功能。
所有邏輯都是通過組件實現(xiàn)的。我們可以通過配置和混合組件，來定義不同類型的實體。其中，A-Frame通過提供如下API，來代表ECS的各個部分：
- 用元素來表示實體
- 用上的HTML屬性來表示組件
實體的抽象例子：
下面讓我們來查看一些使用各種組件，來構(gòu)建實體的抽象示例。其中Sphere(球體)是一個實體，而Position、Geometry和Material是該實體的組成部分。
Sphere = Position + Geometry + Material
Ball = Position + Velocity + Physics + Geometry + Material
A-Frame中的語法實體
如下代碼段所示，我們根據(jù)前面的示例，創(chuàng)建了Sphere實體的語法：
HTML
material="color: white; shader: flat; src: glow.jpg"
position="0 0 -5">
代碼清單 1
可見，要繪制該球體，您需要定義一個，并將組件添加為HTML屬性。通常，大多數(shù)組件都會有多個屬性，并使用類似于CSS的語法來表示。
幾何體(Primitives)
A-Frame提供了諸如或等幾何體元素。它們是一些方便初學(xué)者在A-Frame中使用的HTML元素，可被用于包裝底層的實體組件。如下代碼段展示了幾何體 被包含在帶有各種幾何體和物料組件的之下。
HTML
Primitive:
Entity:
代碼清單 2
在DeBrowser中構(gòu)建VR場景
下面，讓我們來構(gòu)建一個包含了各種實體和動畫的基本A-Frame VR場景(如下圖所示)。
圖 1
首先，我們需要為此項目創(chuàng)建一個文件夾。接著，在該“項目文件夾”中創(chuàng)建一個index.html文檔，并將如下HTML代碼放入其中：
HTML
代碼清單 3
我們需要將最新版本的??A-Frame??作為腳本標簽，包含在中，并且在中包含標簽。
什么是場景?
所有實體和組件都必須被添加到待渲染的場景中。在A-Frame中，場景是由實體表示的。能夠為我們處理三個.js和WebXR樣板，其中包括設(shè)置WebGL(負責渲染)、畫布、相機、燈光、渲染器、渲染循環(huán)、以及針對HTC Vive、Oculus Rift、Samsung GearVR等平臺開箱即用(out-of-the-box)的WebXR支持。
通過Entity類，場景實體繼承了其所有屬性、鏈接組件的能力、以及在開始渲染循環(huán)之前，等待其所有子實體和節(jié)點(例如和)的加載行為。
添加實體
在我們的中，您可以使用A-Frame的一種默認幾何體(如)來添加各種3D實體。如下代碼段定義了的顏色。
HTML
代碼清單 4
圖 2
如上圖可見，由于相機和都默認位于0、0、0原點上，那么在未對其移動之前，您將無法看到該盒子。因此，您可以通過使用“位置組件(position component)”將box轉(zhuǎn)換為3D形式的空間展示。
在3D中轉(zhuǎn)換實體
讓我們先來看看3D空間。如下圖所示，A-Frame使用的是右手坐標系，即默認的相機方向為：X軸正方向向右延伸，Y軸正方向向上延伸，Z軸正方向向著我們伸出屏幕：
圖 3
使對相機可見
我們需要讓盒子對于相機可見、可旋轉(zhuǎn)并可縮放。首先，為了使其可見，您可以使用位置組件在負Z軸上將盒子向后滑動5米。同時，您還應(yīng)該在正Y軸上，將盒子向上移動2米，這樣盒子就不會與底面相交。
為了使其可旋轉(zhuǎn)與縮放，我們同樣需要使用相同的右手坐標系，將盒子傾斜并讓其尺寸翻倍(如下代碼段所示)。
HTML
代碼清單 5
由于WebXR的API是以米為單位來返回位置的，因此A-Frame的距離單位也是“米”。在為VR設(shè)計場景時，我們需要考慮實體的真實世界縮放。一個height="10" 的盒子，在你的桌面上也許看起來很正常，但是在VR中就顯得過大了。此外，旋轉(zhuǎn)的單位為“度”，不過它在轉(zhuǎn)換到three.js時，則會在內(nèi)部被轉(zhuǎn)換為弧度。
父子轉(zhuǎn)換
A-Frame的HTML也可以表示3D場景圖。在場景圖中，實體可以有一個父級和多個子級。子實體能夠從其父實體處繼承各種變換(包括：位置、旋轉(zhuǎn)和縮放)。例如，我們可以將某個“球體”作為某個盒子的子元素(如下圖所示)：
HTML
代碼清單 6
由計算可知，球體的位置為1、2、3。這是通過將球體的父位置與其自身位置組裝在一起而實現(xiàn)的。同樣，球體將會繼承盒子的旋轉(zhuǎn)和縮放。
添加環(huán)境組件
A-Frame允許開發(fā)人員創(chuàng)建各種可以讓其他人輕松使用的可重用組件。例如：環(huán)境組件就能夠通過一行HTML代碼，為我們生成了各種環(huán)境。它不但方便我們便捷地啟動VR應(yīng)用，而且提供了十多種具有眾多參數(shù)的環(huán)境。
為此，我們首先需要添加帶有腳本標簽的環(huán)境組件。通過unpkg.com，您可以獲得指向相關(guān)npm模塊的最新CDN鏈接(如下代碼段所示)。
HTML
代碼清單 7
然后，如下代碼段所示，請在由環(huán)境組件鏈接到的標記中，添加一個a-entity。您可以指定諸如preset:forest的預(yù)設(shè)環(huán)境，以及“樹木數(shù)量”到“修整量”等許多其他參數(shù)。
HTML
scale="2 2 2">
代碼清單 8
預(yù)設(shè)是定義特定樣式的參數(shù)值組合，它們是您實現(xiàn)自定義的起點。您可以按下ctrl+alt+i，調(diào)用檢查器(Inspector)來調(diào)整這些參數(shù)。如下圖所示，作為一種用于檢查和調(diào)整實體/組件的工具，檢查器類似于瀏覽器的DOM檢查器，不過它是專為3D和A-Frame量身定制的。
圖 4
添加資產(chǎn)管理系統(tǒng)
您可以使用元素將紋理(texture)應(yīng)用到box中。其中，資產(chǎn)管理(Asset Management)可以在渲染場景之前，加載和緩存圖像和視頻。預(yù)加載和緩存的方式可提高性能。如下代碼段便是如何將資產(chǎn)管理應(yīng)用到圖像上的示例：
HTML
代碼清單 9
上面定義了一個帶有圖像紋理的標簽。如下圖所示，該img有一個id="boxTexture"。該id會以src="#boxTexture"方式被引用到盒子中。
圖 5
添加動畫
如代碼清單10所示，您可以使用動畫組件為盒子和球體設(shè)置動畫，例如，通過設(shè)置如下內(nèi)容，讓盒子可以上下移動：
- 設(shè)置屬性：object3D.position.y; to: 2.2，實現(xiàn)盒子在Y軸上的2到2.2米之間移動。
- 在方向(dir)上可以交替上升和下降。
- 將2000毫秒設(shè)置為持續(xù)一個周期的時長。
- 用loop指定動畫的無限重復(fù)。
HTML
animation="property: object3D.position.y; to: 2.2; dir: alternate; dur: 2000; loop: true">
代碼清單 10
上述代碼的最終運行結(jié)果，如下圖所示，您也可以在??Glitch??中查看到。
圖 6
增強現(xiàn)實
當然，A-Frame也可以實現(xiàn)AR的體驗。同樣，您可以參考Glitch上給出了??入門示例??，作為實現(xiàn)AR的起點。
圖 7
此示例已針對AR的“命中測試(hit testing)”應(yīng)用進行了擴展。其結(jié)果可以在如下代碼段中查看到。其中的粗體部分為添加的內(nèi)容。當然，您也可以通過鏈接--https://glitch.com/edit/#!/ar-basic-hittest，參考glitch中的具體實現(xiàn)過程。此外，您還可以通過URL--https://ar-basic-hittest.glitch.me/，在自己的手機上測試其最終版本。
HTML
radius="0.5">
width="4">
src="./arrow.png" width="0.2">
代碼清單 11
什么是AR命中測試?
命中測試可以將虛擬對象與現(xiàn)實世界中的對象(如地板、桌子和墻壁等)相對齊。在下面的示例中，您可以將上圖 7 中的對象內(nèi)嵌放置到桌上。其方法是通過相機，使用十字線瞄準桌子，然后定位該桌子(即命中測試)。
在AR中進行命中測試前，您需要首先在腳本標簽中包含ar-components.js。您可以直接從Glitch處復(fù)制此庫--https://glitch.com/edit/#!/ar-basic-hittest。
在場景標簽中，您應(yīng)當通過hit test命令，指明要用到的WebXR功能。然后通過a-entity去應(yīng)用對象的真實比例。
最后，請使用組件定義一個新實體：ar-hit-test。該組件可以將虛擬對象內(nèi)聯(lián)并放置在您通過相機看到的真實對象上，如下圖所示。為了支持命中測試，請通過a-plane組件去定義一個20厘米的正方形標線。
圖 8
展望
A-Frame還可以實現(xiàn)更多的VR和AR應(yīng)用。您可以通過鏈接--https://aframe.io/，查閱到更多的示例和文檔。例如，您可以使用命中測試去制作“AR籃球游戲”等。
譯者介紹
陳 峻 （Julian Chen），社區(qū)編輯，具有十多年的IT項目實施經(jīng)驗，善于對內(nèi)外部資源與風險實施管控，專注傳播網(wǎng)絡(luò)與信息安全知識與經(jīng)驗；持續(xù)以博文、專題和譯文等形式，分享前沿技術(shù)與新知；經(jīng)常以線上、線下等方式，開展信息安全類培訓(xùn)與授課。
原文標題：Virtual Reality and Augmented Reality in the Browser，作者：Peter Eijgermans
本文題目：如何構(gòu)建瀏覽器中的VR和AR？
本文地址：http://fisionsoft.com.cn/article/coshgdd.html
