鑰匙要點(diǎn)

• >網(wǎng)絡(luò)虛擬現(xiàn)實(shí)體驗(yàn)的開(kāi)發(fā)正在迅速發(fā)展，Google的可嵌入VR視圖是最近的添加。 VR視圖允許開(kāi)發(fā)人員將360度虛擬現(xiàn)實(shí)圖像和視頻嵌入到桌面和移動(dòng)設(shè)備上的網(wǎng)站中。
> Google的VR視圖與Chrome，Safari，F(xiàn)irefox，IE 11和臺(tái)式機(jī)和移動(dòng)設(shè)備上的Edge的最新版本兼容。在桌面上，VR體驗(yàn)是一種全景體驗(yàn)，可以用鼠標(biāo)操縱視圖?？梢允褂肎oogle Cardboard。
• >將VR視圖嵌入到網(wǎng)站中，可以通過(guò)兩種方式完成：使用Google的托管VR視圖或托管您自己的版本。托管您自己的版本當(dāng)前更可靠，尤其是對(duì)于跨多個(gè)平臺(tái)的較大觀眾，因?yàn)楫?dāng)VR視圖和圖像托管在不同的服務(wù)器上時(shí)，iOS Safari存在一些問(wèn)題。
> Google的VR視圖是為Web創(chuàng)建360 VR內(nèi)容的簡(jiǎn)便方法。它允許快速嵌入全景內(nèi)容，類似于嵌入YouTube視頻。但是，要在所有平臺(tái)上具有更可靠的體驗(yàn)，建議您自己托管VR視圖。
> Web開(kāi)發(fā)人員可用于為網(wǎng)絡(luò)建立虛擬現(xiàn)實(shí)體驗(yàn)的方法正在以快速而令人興奮的速度增長(zhǎng)！我之前介紹了如何在去年在網(wǎng)絡(luò)上構(gòu)建VR的方法，從那以后它已經(jīng)進(jìn)步了很多。在2016年出現(xiàn)的Web的虛擬現(xiàn)實(shí)體驗(yàn)有很多選擇 - 在過(guò)去的兩個(gè)星期中，我們探索了A型框架，一種開(kāi)源可擴(kuò)展的VR Web框架，并使用Primrose在VR中構(gòu)建VR。上個(gè)月，Google自己宣布了另一個(gè)令人興奮的選項(xiàng)，該選項(xiàng)將把更多的VR帶到網(wǎng)絡(luò)上 - 可嵌入的VR視圖。
• 什么是VR視圖？

“ VR視圖”為開(kāi)發(fā)人員提供了將360度虛擬現(xiàn)實(shí)圖像和視頻嵌入到桌面和移動(dòng)上的網(wǎng)站中的能力。 VR視圖也可以嵌入到Android和iOS上的本機(jī)應(yīng)用中。在本文中，我們將探討將360個(gè)全景圖像嵌入現(xiàn)有網(wǎng)站的簡(jiǎn)單。

>設(shè)備兼容性

> Google的VR視圖可在臺(tái)式機(jī)和移動(dòng)設(shè)備上的以下瀏覽器的最新版本上工作：

• > chrome在Android，iOS，Windows，Mac OS X和Linux上 在iOS和Mac OS X上
> Safari。
• Windows上的Firefox，Mac OS X和Linux。
IE 11和Windows上的邊緣。
• >使用桌面版本，您的“虛擬現(xiàn)實(shí)”體驗(yàn)主要是一種全景體驗(yàn)，您可以用鼠標(biāo)拖動(dòng)視圖。他們稱此版本的體驗(yàn)為“魔術(shù)窗口”，類似于桌面Quicktime VR Panorama體驗(yàn)，有些人幾年前可能已經(jīng)見(jiàn)過(guò)。但是，今天的Google VR視圖是使用JavaScript而不是第三方插件完成的，并且可以通過(guò)使用Google Cardboard的真實(shí)VR視圖來(lái)增強(qiáng)。
拍攝全景照片

>

Google有一個(gè)“紙板相機(jī)”應(yīng)用程序，可以在Android上拍攝360度全景照片。對(duì)于iOS上的人，有一個(gè)名為Optonaut的應(yīng)用程序，也可以拍攝360張照片。我不太確定Optonaut照片出口和使用其他地方有多容易，因此，如果您確實(shí)有iOS設(shè)備并嘗試一下 - 我很想聽(tīng)聽(tīng)它的發(fā)生！

>使用Google Cardboard攝像頭，您可以按照屏幕上的說(shuō)明來(lái)拍攝360張照片，然后繞一個(gè)圓圈移動(dòng)。最有效的場(chǎng)景將是在戶外拍攝的場(chǎng)景，圖像的底部或頂部沒(méi)有太多的開(kāi)放空間，并且細(xì)節(jié)不多。如果您正在拍攝較小的房間的照片，則可能需要在圖像正確之前調(diào)整圖像（我們將在下面查看如何進(jìn)行操作）。

>使用相機(jī)拍照后，應(yīng)該在/sdcard/dcim/cardboardCamera上在手機(jī)上找到360張照片。將其復(fù)制到計(jì)算機(jī)上，您將進(jìn)行開(kāi)發(fā)。

準(zhǔn)備圖像

>如果您的場(chǎng)景中沒(méi)有大量的天空和地面，那么您的圖像在這些區(qū)域可能會(huì)有些奇怪。有時(shí)，特別是對(duì)于室內(nèi)鏡頭，這是不可避免的。我們使用了SitePoint Office

的照片（感謝Angela?。?angy>，其中有一個(gè)完美的示例，說(shuō)明了圖像的底部在底部有很多不可避免的細(xì)節(jié)：

>

為了避免在圖像的頂部和底部有過(guò)多的細(xì)節(jié)，您可以在圖像上方和下方添加空間，以使情況保持整潔。您可以嘗試提供很多技術(shù)，可以給出一個(gè)不太屈光的頂部和底部區(qū)域，到目前為止，我最喜歡的是在頂部和底部添加模糊的反向圖像。

>

嘗試此方法，在Photoshop中創(chuàng)建2048 x 1024圖像，并粘貼其中的三個(gè)全景圖像：

>拉伸所有三個(gè)，以便它填充畫(huà)布，然后使用

transform>“ transform> flip垂直”翻轉(zhuǎn)頂部和底部圖像：>

應(yīng)該看起來(lái)像：

>重復(fù)頂部和底部圖像，然后使用濾鏡> Blur> Gaussian Blur 模糊副本：

>

>試用半徑值的不同值，因?yàn)橛行﹫?chǎng)景看起來(lái)會(huì)更好，反之亦然：>

>伸出每個(gè)模糊的層，以使它們延伸到圖像之外（因?yàn)檫吘墪?huì)褪色，我們不希望它們?cè)谖覀兊漠?huà)布的邊緣上褪色）：

>

我們的圖像的最終結(jié)果應(yīng)該看起來(lái)像：

如果您有Photoshop技能，則可能會(huì)想出其他使圖像底部和頂部的方法并不那么奇怪。有些場(chǎng)景會(huì)比其他場(chǎng)景更容易且不明顯！

>

嵌入我們的圖像

>有兩種將我們的圖像嵌入VR視圖中的選項(xiàng)。我們可以嵌入Google的托管VR視圖，也可以托管我們自己的版本。目前，在同一服務(wù)器上托管我們自己的版本更可靠。當(dāng)VR視圖和圖像托管在不同的服務(wù)器上時(shí)，在iOS Safari上，情況無(wú)法正常工作。帶有圖像的服務(wù)器還需要能夠允許使用Google的托管VR視圖。

使用Google的托管VR View

>快速測(cè)試VR視圖的樣子，您可以在網(wǎng)頁(yè)中包含以下內(nèi)容：

<span><span><span><iframe</span> width<span>="100%"</span>
</span></span><span>	<span>height<span>="300px"</span>
</span></span><span>	<span>allowfullscreen
</span></span><span>	<span>frameborder<span>="0"</span>
</span></span><span>	<span>src<span>="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&
</span></span></span><span><span>	is_stereo=true<span>"</span>></span>
</span><span><span><span></iframe</span>></span></span>

Google的示例代碼看起來(lái)像這樣的行動(dòng)：>

>

>您會(huì)在其中看到一個(gè)is_stereo = true屬性 - 這是在一個(gè)圖像中使用Panorama重復(fù)設(shè)置圖像的時(shí)候。為了使事情變得簡(jiǎn)單，我們沒(méi)有在自定義圖像示例中走那條路！有關(guān)此信息的更多信息，請(qǐng)參見(jiàn)VR View上的Google文檔。

托管VR視圖

Google的托管VR視圖非常方便，就像嵌入YouTube視頻一樣簡(jiǎn)單，非常簡(jiǎn)單，非常適合快速嵌入全景內(nèi)容。但是，如果您想在許多平臺(tái)上使用它，則需要自己托管VR視圖。否則，這些圖像將在iOS Safari上具有不正確的方向錯(cuò)誤。希望這將盡快解決，不再需要自我托管！

自我托管并不難設(shè)置。從Google的VR View GitHub下載代碼，并在某個(gè)地方托管具有公共訪問(wèn)權(quán)限的地方。如果將其保留在服務(wù)器上的名為“ vrview”的文件夾中，則可以通過(guò)///yourdomain.com/vrview/?image=Examples/coral.jpg&is_stereo=true訪問(wèn)它。如果您直接為此設(shè)置了托管（或直接指向它的域名），則可以避免 /vrview位。

>

要添加其他圖像，將它們包含在您喜歡的何處（例如Images/yourimage.jpg）中，然后更改上面的URL以查找此新圖像（例如///yourdomain.com/vrview/？Image？ = images/yourimage.jpg）。

如果您只是想快速使用自己的圖像快速測(cè)試此操作，并且沒(méi)有準(zhǔn)備好托管，那么一個(gè)不錯(cuò)的選擇是使用GitHub頁(yè)面。

在GitHub頁(yè)面上托管VR視圖

>您可以避免下載和托管VR視圖，而不是撥出Google的存儲(chǔ)庫(kù)，然后使用github頁(yè)面托管在您的github帳戶上。

開(kāi)始，請(qǐng)轉(zhuǎn)到Google的VR查看GitHub存儲(chǔ)庫(kù)，然后單擊“叉”：>

然后，在存儲(chǔ)庫(kù)的叉子內(nèi)，查找cname文件，然后單擊：>

此文件將把域名分配給您的github頁(yè)面。如果您準(zhǔn)備使用域名并希望將其設(shè)置為使用此域名，請(qǐng)閱讀GitHub指南，以使用GitHub頁(yè)面使用自定義域。否則，請(qǐng)單擊右側(cè)的垃圾桶圖標(biāo)，以從您的分叉版本的倉(cāng)庫(kù)中刪除此文件。相反，這將允許您使用典型的http://you.github.io/地址。

提交那個(gè)更改：

>最后，在您的VR視圖的分叉版本中創(chuàng)建一個(gè)新的分支，并將其稱為“ GH-pages”

。此分支中的所有內(nèi)容都可以在您的github頁(yè)面上訪問(wèn)此存儲(chǔ)庫(kù)：

如果您現(xiàn)在訪問(wèn)http://you.github.io/vrview/?image= examples/coral.jpg，您應(yīng)該擁有自己的VR視圖的工作版本！

>從這里開(kāi)始，您可以在自己喜歡的任何地方添加自己的圖像，就像上面的自我托管一樣。在這種情況下，您需要將該圖像直接添加到gh-pages分支中，或?qū)⑵涮砑拥?em>> master 中，然后將其帶入gh> gh-pages 從那里分支。如果您是GitHub的新手，則可以避免命令行的大部分混亂，然后在打開(kāi)圖像的文件夾時(shí)將圖像拖到瀏覽器窗口中。

>更新圖像后，將URL更改為定位圖像（例如http://you.github.io/vrview/?image= yourimage.jpg），您應(yīng)該在光榮的360 Panorama中看到它！ ??>

在Action！

中

>這是一個(gè)360的偷偷摸摸，可以窺視在Sitepoint辦公室工作的感覺(jué) - 最后，所有站點(diǎn)的工作人員都可以在業(yè)余時(shí)間實(shí)際上重新訪問(wèn)辦公室！您可以通過(guò)單擊右下方的全屏圖標(biāo)來(lái)全屏看到它。如果您在智能手機(jī)上，旁邊也將有一個(gè)VR圖標(biāo)。如果您有Google紙板耳機(jī)并享受！

>

結(jié)論

> Google的VR視圖添加了為Web創(chuàng)建360 VR內(nèi)容的另一個(gè)簡(jiǎn)單選擇，并且非常容易組合在一起！

>

>如果您將自己的360視圖放在一起，我很想看看您的創(chuàng)作！在下面的評(píng)論中讓我知道，或通過(guò)@thatpatrickguy在Twitter上與我聯(lián)系。

>關(guān)于嵌入虛擬現(xiàn)實(shí)的常見(jiàn)問(wèn)題，vr視圖

>我如何在網(wǎng)站上嵌入VR視圖？

>在您的網(wǎng)站上嵌入VR視圖是一個(gè)簡(jiǎn)單的過(guò)程。首先，您需要擁有360度圖像或視頻文件。然后，您可以將Google的VR視圖用于Web，這是一個(gè)JavaScript API，可讓您在網(wǎng)站上嵌入360度內(nèi)容。您只需要在HTML文件中包含VR視圖腳本，然后使用“ AddVrview”函數(shù)來(lái)指定要顯示的圖像或視頻文件。您還可以通過(guò)設(shè)置不同的參數(shù)（例如初始攝像機(jī)角度或圖像的分辨率）來(lái)自定義VR視圖。

>

>我可以使用哪些類型的文件用于VR視圖？

vr View圖像和視頻文件。對(duì)于圖像，您可以使用JPEG或PNG文件，對(duì)于視頻，可以使用MP4文件。但是，重要的是要注意，這些文件必須是360度格式，這意味著它們應(yīng)涵蓋場(chǎng)景的完整360度視圖。您可以使用360度攝像機(jī)或3D渲染軟件創(chuàng)建此類文件。

>

>我可以在移動(dòng)設(shè)備上使用VR視圖嗎？實(shí)際上，他們?cè)谝苿?dòng)設(shè)備上提供了更身臨其境的體驗(yàn)，因?yàn)橛脩艨梢酝ㄟ^(guò)移動(dòng)設(shè)備來(lái)探索360度的內(nèi)容。此外，如果設(shè)備具有陀螺儀，則VR視圖可以響應(yīng)設(shè)備的方向，提供更現(xiàn)實(shí)的體驗(yàn)。

>

>如何自定義VR視圖的外觀？通過(guò)在“ AddVrview”函數(shù)中設(shè)置不同參數(shù)來(lái)自定義VR視圖的外觀。例如，您可以設(shè)置初始攝像頭角度，圖像的分辨率或VR視圖的大小。您還可以啟用或禁用VR模式，該模式允許用戶使用VR耳機(jī)查看內(nèi)容。

我可以使用VR耳機(jī)使用VR視圖嗎？

是的，是的，VR視圖與VR視圖兼容VR耳機(jī)。啟用VR模式后，用戶可以以立體模式查看360度內(nèi)容，從而提供更身臨其境的體驗(yàn)。他們還可以通過(guò)移動(dòng)自己的頭來(lái)導(dǎo)航內(nèi)容。

>

使用VR視圖的技術(shù)要求是什么？

用于使用VR視圖，您需要一個(gè)可以服務(wù)VR視圖的Web服務(wù)器腳本和360度內(nèi)容。內(nèi)容必須為360度格式，并且必須通過(guò)URL訪問(wèn)。此外，Web瀏覽器必須支持WebGL，這是用于渲染3D圖形的JavaScript API。 Web應(yīng)用程序。您只需要在應(yīng)用程序的HTML文件中包含VR視圖腳本，然后使用“ AddVrview”功能顯示360度內(nèi)容。您還可以通過(guò)使用API??的函數(shù)和事件來(lái)編程與VR視圖進(jìn)行交互。

>

>如何為VR視圖創(chuàng)建360度內(nèi)容？

>您可以為您創(chuàng)建360度內(nèi)容的內(nèi)容使用360度相機(jī)或3D渲染軟件的VR視圖。相機(jī)應(yīng)捕獲場(chǎng)景的完整360度視圖，該軟件應(yīng)以360度格式渲染場(chǎng)景。然后，您可以將被捕獲的內(nèi)容或渲染的內(nèi)容轉(zhuǎn)換為JPEG，PNG或MP4文件。

>我可以在商業(yè)項(xiàng)目中使用VR視圖嗎？

是的，您可以在中使用VR視圖商業(yè)項(xiàng)目。 Web的VR視圖是一個(gè)開(kāi)源項(xiàng)目，這意味著您可以在任何類型的項(xiàng)目（包括商業(yè)項(xiàng)目）中自由使用它。但是，您應(yīng)該遵守該項(xiàng)目的許可，該許可要求您在項(xiàng)目中包括版權(quán)通知和免責(zé)聲明。

>在哪里可以找到有關(guān)VR視圖的更多信息？該文檔提供了有關(guān)如何使用API??的詳細(xì)指南，包括如何嵌入VR視圖，如何自定義它以及如何以編程方式與IT進(jìn)行交互。它還提供了API功能和事件的參考，以及一些示例和教程。

>

以上是用VR視圖嵌入網(wǎng)絡(luò)上的虛擬現(xiàn)實(shí)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！