全景展示技術(shù)，應(yīng)該是當(dāng)下最人們的技術(shù)了，各大硬件廠商接連推出VR硬件，也對(duì)VR未來進(jìn)行暢想，仿佛VR全景展示已經(jīng)真的融入到我們身邊了。

然而，全景展示設(shè)備也是五花八門，有牛人“紙制”，也有“大廠”生產(chǎn)，我們從技術(shù)角度來舉例說明下VR，3D全景技術(shù)怎么用H5來武裝自己的營(yíng)銷。 先百度百科下，VR是什么?

曰：綜合利用計(jì)算機(jī)圖形系統(tǒng)和各種現(xiàn)實(shí)及控制等接口設(shè)備，在計(jì)算機(jī)上生成的、可交互的三維環(huán)境中提供沉浸感覺的技術(shù)。其中，計(jì)算機(jī)生成的、可交互的三維環(huán)境稱為虛擬環(huán)境(即Virtual Environment，簡(jiǎn)稱VE)。虛擬現(xiàn)實(shí)技術(shù)是一種可以創(chuàng)建和體驗(yàn)虛擬世界的計(jì)算機(jī)仿真系統(tǒng)。它利用計(jì)算機(jī)生成一種模擬環(huán)境，利用多源信息融合的交互式三維動(dòng)態(tài)視景和實(shí)體行為的系統(tǒng)仿真使用戶沉浸到該環(huán)境中。 ——《百度百科》節(jié)選

概念已清，怎么實(shí)現(xiàn)”可交互的三維環(huán)境“，下面型科就以一個(gè)案例來全面剖析全景展示技術(shù)在H5上的運(yùn)用。

這個(gè)案例是鄭凱帶你去baby的化妝間,跑男興風(fēng)作浪很多年，這個(gè)契機(jī)，這個(gè)環(huán)境，不知道怎么就有了這個(gè)案例。就是這么任(wu)性(zhi)的介紹。這個(gè)案例，前一半場(chǎng)是一個(gè)視頻，引入環(huán)境，表示鄭凱帶著你去的。當(dāng)然，這個(gè)前導(dǎo)視頻也是可以做成全景的，后面我們別的案例在做介紹，它是后半部分。一個(gè)3D全景的化妝間

大概是這個(gè)樣子的，我們可以左右，上下滑動(dòng)來查看這個(gè)化妝間的位置，查看不同的角度，我們看到的內(nèi)容也是不一樣的，還有一個(gè)好玩的地方，他和《跑男》一樣有一個(gè)找線索的游戲過程，在這一個(gè)3D的全景里面，你就像真的走到了這個(gè)房間一樣，可謂360°無死角啊!可以翻看查找你要的線索。圖中閃亮的鉆石點(diǎn)就是提供的線索，有興趣的可以玩玩。給大家體驗(yàn)一個(gè)最新的VR視覺視頻類H5，通過第一視角的方式遨游美年達(dá)神碼樂園，給用戶極強(qiáng)的視覺感→這里可以體驗(yàn)

接下來我們拆解下著個(gè)全景展示圖是什么，來，大家看過來

看到了吧，這就是一個(gè)全景的照片，我們可以用提供全景拍攝的設(shè)備拍攝出來。制作全景圖的工具網(wǎng)上也右提供的，有的收費(fèi)有的免費(fèi)，百度上一搜“全景圖制作工具”出來一堆。(就是這樣任(wu)性(zhi)的提示) 其實(shí)，除了提供一張全景圖以外，還可以提供一組6張樣圖，一個(gè)正方體的6個(gè)面的圖片。例如:

顯示效果大概是這樣的!

不過，這個(gè)要求拍攝的角度都是正面的。 立方體全景展示圖有6個(gè)面，我們需要定義每個(gè)面貼圖的背景圖片，3D位置，旋轉(zhuǎn)角度(默認(rèn)的6個(gè)面都是朝著我們的，我們需要定義朝坐標(biāo)軸的各個(gè)方向做90度的旋轉(zhuǎn)，才可以搭建成一個(gè)立方體)

接下面我們就用3D引擎技術(shù)來實(shí)現(xiàn)一個(gè)3D場(chǎng)景。 Three.js源自Github的一個(gè)開源項(xiàng)目，想要利用Three.js制作一個(gè)物體渲染到網(wǎng)頁中去，需要構(gòu)建這3個(gè)組建：場(chǎng)景(scene)、相機(jī)(camera)和渲染器(renderer)。

一.場(chǎng)景(scene)

即是畫布，是所有物體object的容器。在最開始的時(shí)候?qū)?chǎng)景實(shí)例化，將之后構(gòu)建的物體都添加到場(chǎng)景中即可。

二.相機(jī)(camera)

用戶是通過相機(jī)Camare來查看在scene下的3d場(chǎng)景，在three.js里包含了正交投影照相機(jī)(Orthographic Camera)和透視投影照相機(jī)(PerspectiveCamera)2種，從模擬人眼看物體的方式來選，透視投影照相機(jī)更適合。如下圖所示，fov是相機(jī)視角的夾角，aspect等于相機(jī)畫幅比例，near和far分別是照相機(jī)到視景體最近、最遠(yuǎn)的距離，均為正值，且far應(yīng)大于near。

三.渲染器(render)

渲染器是用來設(shè)定渲染的結(jié)果會(huì)在頁面的什么元素上面呈現(xiàn)，以及按什么規(guī)則來渲染。

完成以上三部過后，就建立一個(gè)3D顯示的模型了。

這樣模型建立好以后，我們就該把我們要表現(xiàn)的素材加入到場(chǎng)景中去了。以全景圖為例，我們通過建立圖片紋理用作整個(gè)背景。這樣我們只是才把素材加入到場(chǎng)景中去，要想真的顯示出來，還需要經(jīng)過渲染。

渲染

這里我們用的是Threejs的實(shí)時(shí)渲染：就是需要不停的對(duì)畫面進(jìn)行渲染，即使畫面中什么也沒有改變，也需要重新渲染。其中一個(gè)重要的函數(shù)是requestAnimationFrame，這個(gè)函數(shù)就是讓瀏覽器去執(zhí)行一次參數(shù)中的函數(shù)，這樣通過上面animate中調(diào)用requestAnimationFrame()函數(shù)，requestAnimationFrame()函數(shù)又讓animate()再執(zhí)行一次，就形成了我們通常所說的渲染循環(huán)了。

這樣，我們就完成了一個(gè)3D全景展示了，在瀏覽器中打開就是剛上面，我們截圖樣子了。

剛才我們只是建立了一個(gè)3D的化妝間的背景圖，案例中的背景圖上還是有其他元素的哦，并且元素是分布在3D全景里面的，只有你滑到了相應(yīng)的位置才能看到，才能操作。 接下來，我們就來看看，怎么在3D全景中加入元素。

下面我們來綁定事件 我們找到這個(gè)Dom，來為它綁定”Click“事件

然后我們?cè)谶\(yùn)行，就和按鈕一個(gè)樣啦，可以在3D全景展示中，尋找你剛布置的點(diǎn)，并且能響應(yīng)到你注冊(cè)的事件。

酷雷曼3DVR全景營(yíng)銷系統(tǒng)的應(yīng)用讓商企更快速樹立品牌形象，提升知名度以及客戶信任感，并通過融合營(yíng)銷轉(zhuǎn)化應(yīng)用和具有針對(duì)性的行業(yè)解決方案，更快速的實(shí)現(xiàn)客戶轉(zhuǎn)化以及留存，幫助商家結(jié)合互聯(lián)網(wǎng)實(shí)現(xiàn)與消費(fèi)者快速結(jié)合，品牌快速傳播，產(chǎn)品實(shí)現(xiàn)快速交付。

免責(zé)聲明：酷雷曼登載此文目的在于傳遞信息，未標(biāo)注原創(chuàng)或具體來源的稿件來源于網(wǎng)絡(luò)，并不意味著贊同文章內(nèi)觀點(diǎn)或作為描述其真實(shí)性的輔助材料。

助力每一位VR全景創(chuàng)業(yè)者成功

用全景讓品牌深入人心

電話：18516908881