如何在H5中完美融入VR技術?道可雲VR全景教程!

2021-09-18 06:12:15 字數 2062 閱讀 2179

vr技術,應該是當下最人們的技術了,各大硬體廠商接連推出vr硬體,也對vr未來進行暢想,彷彿vr已經真的融入到我們身邊了。

接下來我們拆解下著個3d全景圖是什麼,來,大家看過來

顯示效果大概是這樣的!

不過,這個要求拍攝的角度都是正面的。 立方體全景圖有6個面,我們需要定義每個面貼圖的背景,3d位置,旋轉角度(預設的6個面都是朝著我們的,我們需要定義朝座標軸的各個方向做90度的旋轉,才可以搭建成乙個立方體)

接下面我們就用3d引擎技術來實現乙個3d場景。 three.js源自github的乙個開源專案,想要利用three.js製作乙個物體渲染到網頁中去,需要構建這3個組建:場景(scene)、相機(camera)和渲染器(renderer)。

一.場景(scene)

即是畫布,是所有物體object的容器。在最開始的時候對場景例項化,將之後構建的物體都新增到場景中即可。

二.相機(camera)

使用者是通過相機camare來檢視在scene下的3d場景,在three.js裡包含了正交投影照相機(orthographic camera)和透視投影照相機(perspectivecamera)2種,從模擬人眼看物體的方式來選,透視投影照相機更適合。如下圖所示,fov是相機視角的夾角,aspect等於相機畫幅比例,near和far分別是照相機到視景體最近、最遠的距離,均為正值,且far應大於near。

三.渲染器(render)

渲染器是用來設定渲染的結果會在頁面的什麼元素上面呈現,以及按什麼規則來渲染。

完成以上三部過後,就建立乙個3d顯示的模型了。

這樣模型建立好以後,我們就該把我們要表現的素材加入到場景中去了。以全景圖為例,我們通過建立紋理用作整個背景。這樣我們只是才把素材加入到場景中去,要想真的顯示出來,還需要經過渲染。

渲染這裡我們用的是threejs的實時渲染:就是需要不停的對畫面進行渲染,即使畫面中什麼也沒有改變,也需要重新渲染。其中乙個重要的函式是requestanimationframe,這個函式就是讓瀏覽器去執行一次引數中的函式,這樣通過上面animate中呼叫requestanimationframe()函式,requestanimationframe()函式又讓animate()再執行一次,就形成了我們通常所說的渲染迴圈了。

這樣,我們就完成了乙個3d全景展示了,在瀏覽器中開啟就是剛上面,我們截圖樣子了。

剛才我們只是建立了乙個3d的化妝間的背景圖,案例中的背景圖上還是有其他元素的哦,並且元素是分布在3d全景裡面的,只有你滑到了相應的位置才能看到,才能操作。 接下來,我們就來看看,怎麼在3d全景中加入元素。

下面我們來繫結事件 我們找到這個dom,來為它繫結」click「事件。

然後我們在執行,就和按鈕乙個樣啦,可以在3d全景中,尋找你剛布置的點,並且能響應到你註冊的事件。

如何在網頁上用H5實現動畫效果?

在web開發中,gif動畫效果是隨處可見,比如常見的loading載入 人物奔跑的gif等等,那麼這些都是怎麼實現的呢?其實實現的原理很簡單,簡而言之,這些所謂的動畫都是一幀一幀的經過一段時間的間隔做出位移而來的 譬如,我們在ps裡面製作gif動畫,首先要把每一幀所需要的製作出來,然後再通過匯出的方...

教你如何在網頁上用H5實現動畫效果

在web開發中,gif動畫效果是隨處可見,比如常見的loading載入 人物奔跑的gif等等,那麼這些都是怎麼實現的呢?其實實現的原理很簡單,簡而言之,這些所謂的動畫都是一幀一幀的經過一段時間的間隔做出位移而來的 譬如,我們在ps裡面製作gif動畫,首先要把每一幀所需要的製作出來,然後再通過匯出的方...

如何將H5一鍵部署到託管服務中

本文的重點不是介紹如何用cocos creator 開發一款小遊戲,所以如果沒有cocos creator的使用或者開發經驗的話,建議先查閱cocos creator的開發手冊。假定我們現在已經開發好一款cocos creator遊戲,點選 你會看到下面的介面 點選構建,就會將我們開發好的遊戲編譯成...