扣丁學(xué)堂淺談基于網(wǎng)頁端的VR如何實現(xiàn)
2017-12-07 10:41:33
1860瀏覽
在現(xiàn)如今，隨著互聯(lián)網(wǎng)科技飛速的發(fā)展和進步，未來可能基于web頁面的VR虛擬實現(xiàn)將會進入我們的視野。因為越來越多的開源組織和機構(gòu)都在開始支持基于web的VR實現(xiàn)，包括mozilla，也推出了基于webVR的許多解決方案。本文介紹的框架aframe便是眾多webVR解決方案中最簡單的開發(fā)框架，這個框架基于javascript的3D類庫three.js和webGL實現(xiàn)，完全使用類似開發(fā)HTML的語法來開發(fā)。
提示：瀏覽器兼容性這里要求支持WebGL，所以相關(guān)chrome，firefox，Opera和Edge等支持webGL的現(xiàn)代瀏覽器都可以方便的運行aframe開發(fā)的webVR應(yīng)用，其它VR設(shè)備例如，oculusrifts等支持web場景的瀏覽器也都可以方便的運行相關(guān)應(yīng)用。
步驟一：引用類庫，定義基礎(chǔ)場景
使用aframe非常簡單，有兩種方式：
傳統(tǒng)的javascript類庫方式
npm包安裝
這里我們使用傳統(tǒng)方式做一個演示，以下是框架代碼
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>WebVRApp</title>
<scriptsrc="aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
以上代碼我們首先引用了aframe的javascript類庫
定義了一個基礎(chǔ)標(biāo)簽a-scene，其它應(yīng)用的代碼都需要書寫到a-scene中，它定義了頂級父標(biāo)簽
步驟二：引用類庫，定義基礎(chǔ)場景
定義場景的天空顏色，如下：
<a-scene>
<a-skycolor="#202020"></a-sky>
</a-scene>
以上定義了VR場景的天空，當(dāng)然，如下使用一張360度全景圖片來展示，可能大家看的更加明顯和直觀
修改以上代碼如下：
<a-scene>
<a-skysrc="/gb/networks/uploadimg/e4ba3350-623e-41ff-a546-aae11592d9f6.jpg"rotation="0-1300"></a-sky>
</a-scene>
步驟三：運行HTML代碼
運行調(diào)試代碼
步驟四：添加一些自定義的元素到場景中
添加如下代碼到相關(guān)場景里：
<a-cylinderposition="10.751"radius="0.5"height="1.5"color="#FFC65D"></a-cylinder>
<a-planerotation="-9000"width="4"height="4"color="#7BC8A4"></a-plane>
以上代碼添加了一個地面及其一格圓錘體，分別定義了顏色，位置，及其高度等等屬性及運行調(diào)試代碼，最后對于太底層的3D編程類庫不熟悉的朋友，可以快速使用aframe生成簡單的webVR效果，相信能夠在某些簡單場景中，實現(xiàn)自己需要的虛擬現(xiàn)實功能，想要了解更多請關(guān)注扣丁學(xué)堂官網(wǎng)、微信等平臺，扣丁學(xué)堂IT職業(yè)在線
VR培訓(xùn)學(xué)習(xí)教育平臺為您提供權(quán)威的
VR視頻教程系統(tǒng)，通過扣丁學(xué)堂金牌講師在線錄制的第一套自適VR在線視頻課程系統(tǒng)，讓你快速掌握VR從入門到精通實戰(zhàn)技能。
【關(guān)注微信公眾號免費領(lǐng)取丁豆獲取更多的學(xué)習(xí)資料】
標(biāo)簽:
VR培訓(xùn)
VR視頻教程
VR虛擬現(xiàn)實
VR在線視頻
返回頂部