摘要:最花時(shí)間的就是使用畫的龍頭,畫了我兩天近十幾個小時(shí)。最終和大家分享成果,慶祝一年一度的端午節(jié)。此外,支持導(dǎo)出的兩種方式與。當(dāng)你選擇的是時(shí)請注意,導(dǎo)出的是個文件缺一不可。關(guān)于作者個人博客沉迷前端美色的工程師。
效果展示:
? 點(diǎn)我打開新世界
相關(guān)技術(shù):
? aframe.js: Mozilla 開源的網(wǎng)頁虛擬現(xiàn)實(shí)體驗(yàn)( WebVR )框架;
? MagicaVoxel: @ephtracy開發(fā)的體素編輯神器;
代碼實(shí)現(xiàn):
html:![]()
代碼分析:
由aframe全權(quán)負(fù)責(zé)搭建3d全景,由 entity-龍頭、sky-天空環(huán)境、text-文字、camera-模擬鏡頭焦點(diǎn)、assert-存放定義對象(通過id引用)構(gòu)成。更多aframe知識點(diǎn)參考官網(wǎng)aframe.io。最花時(shí)間的就是使用MagicaVoxel畫的龍頭,畫了我兩天近十幾個小時(shí)。最終和大家分享成果,慶祝一年一度的端午節(jié)。
寫在最后:
最重要的往往在最后。細(xì)心的你發(fā)現(xiàn)了嗎?在源碼中a-text的值明明寫了中文卻沒有顯示。是的,aframe用的字體不支持偉大的漢字,前端大神可以嘗試一下更改aframe引用的字體。
還有一點(diǎn)重要的是,引用aframe.js后必須運(yùn)行在服務(wù)器端,否則可能出現(xiàn)瀏覽器提示跨域沖突的問題,可以將代碼置于nodejs或者tomcat等服務(wù)器下運(yùn)行。
此外,aframe支持MagicaVoxel導(dǎo)出的兩種方式.PLY (with Baked Shadows)與.OBJ。當(dāng)你選擇的是OBJ時(shí)請注意,導(dǎo)出的是3個文件(.obj/.png/.mtl)缺一不可。
關(guān)于作者:
rebey.cn:個人博客-沉迷前端美色的java工程師。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/82752.html
摘要:片元著色器主要處理片元顏色,在這里只是將紋理坐標(biāo)和紋理對象傳給片元著色器。根據(jù)公式分別計(jì)算出左右視口的模型視圖投影矩陣,傳給頂點(diǎn)著色器程序,與頂點(diǎn)緩沖區(qū)的頂點(diǎn)坐標(biāo)相乘繪制出最終頂點(diǎn)。 最近WebVR API 1.1已經(jīng)發(fā)布,2.0草案也在擬定中,在我看來,WebVR走向大眾瀏覽器是早晚的事情了,今天本人將對WebVR開發(fā)環(huán)境和開發(fā)流程進(jìn)行深入介紹。 WebVR與WebVR API 首先...
摘要:增強(qiáng)現(xiàn)實(shí)以下簡稱浪潮正滾滾而來,瀏覽器作為人們最唾手可得的人機(jī)交互終端,正在大力發(fā)展技術(shù)。目前年底前端要想實(shí)現(xiàn),都是靠的視頻透視式技術(shù)。但這兩個都是移動的,于是谷歌的團(tuán)隊(duì)提供了和兩個庫,以便開發(fā)者能用技術(shù)來基于和開發(fā),從而實(shí)現(xiàn)。 本文作者 GeekPlux,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development...
閱讀 2055·2019-08-30 15:54
閱讀 3602·2019-08-30 15:52
閱讀 1900·2019-08-29 17:20
閱讀 2590·2019-08-29 17:08
閱讀 2406·2019-08-26 13:24
閱讀 949·2019-08-26 11:59
閱讀 2839·2019-08-23 14:50
閱讀 698·2019-08-23 14:20