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