今天如何在網絡上構建VR

到2020年，虛擬現實的價值最高為70億美元。在此期間，網絡絕對不會成為僅限的2D環境。實際上，已經有幾種簡單的方法將VR帶入瀏覽器。與之合作！

也非常有趣

開始您的發展冒險進入虛擬網絡，有三種潛在的方法可以做到這一點：>

> javascript，三分和觀看設備方向

• > javascript，三。
css和webvr
• （仍然很早就） >我將仔細閱讀每個人的工作方式。
鑰匙要點
• 通過三種主要方法，可以將虛擬現實（VR）納入Web開發中：JavaScript，三js和觀察設備方向； JavaScript，三。 js和webvr；和CSS和WebVr。
javaScript，三分和觀看設備方向方法使用設備方向瀏覽器事件來檢測設備旋轉和傾斜，在VR上下文中，該事件允許調整相機的調整，可以跟隨觀看者的凝視。

。

> JavaScript，Trix.js和WebVR是一種實驗方法，目前最適合訪問VR耳機方向，例如Oculus Rift。它使用WebVR API提供對VR設備信息的訪問。

>

>目前處於開發的早期階段的CSS和WebVR方法旨在將CSS 3D變換與VR全屏模式集成。

>為Web創建VR體驗被視為採用VR技術的關鍵驅動力，而Boris Smus的WebVR樣板建議作為希望為Web建立VR體驗的開發人員的最佳起點。 >

• > javascript，三分和觀看設備方向
• >目前大多數基於瀏覽器的虛擬現實項目工作的方式之一是通過設備方向瀏覽器事件。這告訴瀏覽器如何定向設備，並允許瀏覽器在旋轉或傾斜時拾取。在VR視角內的此功能使您可以檢測到某人何時環顧並調整相機以跟隨他們的目光。
• 為了在瀏覽器中實現出色的3D場景，我們使用了Trix.js，這是一個JavaScript框架，可以輕鬆創建3D形狀和場景。它使大部分複雜性都無法彙集3D體驗，並讓您專注於試圖在場景中放置的內容。
>
• >我在SitePoint上寫了兩個使用設備方向方法的演示：
• >將VR帶到網絡上，使用Google紙板和三個。
>可視化vr中的Twitter流和節點
• >
>如果您是三分新人以及如何整理場景，我建議您查看以上兩篇文章，以便對此方法進行更深入的介紹。我將在這裡介紹關鍵概念，但是它會處於更高的層次。

>這些關鍵組件涉及以下JavaScript文件（您可以從上面的示例演示中獲取這些文件，並且還會在三個示例下載中找到它們）：

three.min.js - 我們的三個.js框架
• > DeviceErientationControls.js - 這是提供我們上面討論的設備方向的三個插件。它可以移動我們的相機以滿足我們設備的動作。
• > orbitControls.js - 這是一個備份控制器，如果我們沒有可以訪問設備方向事件的設備，則可以使用鼠標移動相機。
>
• > stereoefect.js - 一個三。效應，將屏幕分成立體鏡圖像，每隻眼睛像VR一樣略有不同。這會創建實際的VR分屏屏幕，而無需我們做任何復雜的事情。 >
• >設備方向
啟用設備方向控件的代碼看起來像：

>

設備方向事件偵聽器具有兼容設備時提供alpha，beta和伽馬值。如果我們沒有任何alpha值，它不會改變我們的控件以使用設備方向，以便我們可以使用軌道控件。

如果確實具有此alpha值，則我們創建一個設備方向控制並為其提供我們的相機變量以控制。如果用戶點擊屏幕，我們還將其設置為將場景設置為全屏（我們不想在VR中盯著瀏覽器的地址欄）。

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Orbit Controls

如果不存在該alpha值，並且我們無法訪問設備的設備方向事件，則該技術提供了一個控制，可以通過使用鼠標將相機拖動來移動相機。看起來很這樣：

>上面代碼可能會混淆的主要內容是Nopan和Nozoom。基本上，我們不想通過鼠標在場景中進行物理移動，我們不想能夠放大或縮小 - 我們只想環顧四周。

立體聲效果

為了使用立體聲效果，我們將其定義為So：

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

>

然後在窗口的大小上，我們更新其大小：

>

在每個requestAnimationframe中，我們設置了場景以通過我們的效果來渲染：

這是設備方向樣式實現VR的工作方式的基礎知識。它對於使用Google紙板進行了精美而簡單的實現可能是有效的，但是在Oculus Rift上並沒有那麼有效。下一個方法對裂谷要好得多。

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

>

> javascript，三。

希望訪問像Oculus Rift這樣的VR耳機方向？ WebVR目前是這樣做的方式。 WebVR是一種早期且實驗性的JavaScript API，可訪問Oculus Rift和Google Cardboard等虛擬現實設備的功能。目前，它可以在每晚的Firefox上使用，以及一些實驗性的移動鉻和鉻。要記住的一件事是，它的規格仍在草稿中並且可能會發生變化，因此請嘗試一下，但要知道您可能需要隨著時間的推移進行調整。

> 總體而言，WebVR API通過以下方式提供對VR設備信息的訪問

>我不會在這裡詳細介紹很多技術細節（我將在其未來的SitePoint文章中進行更詳細的詳細信息！），如果您有興趣查看更多信息，請查看WebVR編輯器的草案。我之所以不會詳細介紹的原因是，有一種實現API的方法。

實現WebVR API的上述易於使用的方法是使用Boris Smus的WebVR樣板。它提供了良好的基準功能，可以實現WebVR並優雅地降低不同設備的體驗。目前，這是我見過的最好的Web VR實現。

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

如果您想為網絡構建VR體驗，這是當前最佳起點的地方！

要開始使用此方法，請在GitHub上下載WebVR樣板。

>

>您可以專注於編輯index.html並使用該設置中的所有文件，也可以從頭開始將特定的插件實現到自己的項目中。如果您想比較每個實現的差異，我將在VR中的Twitter流中可視化的Twitter流遷移，並從上面的three.js和Node示例遷移到VR中的WebVR驅動的Twitter流中。 要將此項目從頭開始，您要擁有的文件是：>

• >三。 min.js - 我們的三框架框架
• > vrcontrols.js - 通過WebVR進行VR控件的三分插件（可以在Boaler_components/trixjs/xplass/js/js/controls/vrcontrols.js中找到boble_components in Boolerplate Project中的
>>>> >>>>
• > vreffect.js - VR效應本身的三分插件，顯示了oculus Rift的場景（可以在BOWER_COMPONENTS/TRIFE_COMPONENTS/TRINE JS/示例/JS/js/js/effects/vreffect.js中找到鍋爐板項目）
• > webvr-polyfill.js - 這是瀏覽器的多填充，這些瀏覽器尚未完全支持WebVR（可以在GitHub和Bower_components/webvr-polyfill/webvr-polyfill/webvr-polyfill.js中找到。代碼）
• > webvr-manager.js - 這是為您管理所有內容的樣板代碼的一部分，包括提供一種輸入和退出VR模式的方法（可以在build/webvr-manager.js中找到）

實施它僅需要從設備方向方法進行一些調整。這是那些想嘗試此方法的人的概述：

>

控制

VR控件非常易於設置。我們可以將一個新的VRControls對象分配給我們之前使用的控件變量。軌道控件和設備方向控制不應是必需的，因為現在的樣板現在應在沒有VR功能的情況下照顧瀏覽器。這意味著您的場景在Google紙板上也應該很好！

> vr效應

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

效果與立體表的實現非常相似。只需將該效果替換為我們的新vreffect：

>

但是，我們在這種方法中不會通過這種效果呈現。相反，我們通過VR Manager渲染。

>

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

VR Manager

VR經理會照顧我們所有進入/退出等等的VR，因此這是我們的場景最終呈現的地方。我們最初通過以下內容進行設置：

> VR Manager提供一個按鈕，如果用戶在兼容瀏覽器上，則可以輸入VR模式，或者如果瀏覽器無法使用VR，則可以將其輸入全屏（全屏是我們想要的移動設備）。 hidebutton參數說我們是否要隱藏該按鈕。我們絕對不想隱藏它！

然後，我們的渲染呼叫看起來像是這樣，它使用了來自我們的three.js的update（）函數的時間戳變量：

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

>

在所有這些方面，您應該擁有一個工作的VR實現，該實現將根據設備轉化為各種格式。

>

> renderer.getSize（）返回錯誤？這讓我發瘋了幾個小時，但是要解決此問題，您需要做的就是 - 更新三個。

effect<span>.setSize(width, height);</span>

webvr樣板在動作中的外觀

這是我的Twitter示例的視圖在支持VR的瀏覽器上的樣子：

在Oculus Rift視圖中，當您單擊VR圖標時會出現：

>

這是智能手機上的視圖，設備方向仍然使我們能夠環顧場景，而我們沒有分屏屏幕。內容的良好響應視圖：

如果我們單擊移動設備上的VR圖標，我們將獲得Google Cardboard樣式設備的全屏視圖：

> css和webvr

Mozilla的目標是在Firefox Nightly版本中為其瀏覽器帶來VR觀看功能，但是很早就！我的運氣並沒有太多運氣，可以在我的Mac和Oculus設置上工作。 Firefox的VladimirVukićević提到的各種慣例包括將CSS 3D轉換與VR全屏模式集成。

>

作為弗拉基米爾（Vladimir）的博客文章的一個例子，他說具有轉換風格的元素：preserve-3d應該從兩個角度呈現兩次，以將其引入VR：>

如果您知道使用VR和CSS的任何演示，請告訴我！我無法追踪任何東西。將網絡的HTML和CSS一部分帶入VR的想法無疑是一個非常有趣的概念。當我們都慢慢轉移到VR設備時，網絡不可避免地會進入這樣的VR領域！

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

結論

技術世界正在緩慢但肯定會在未來幾年內擁抱虛擬現實，因為我們的技術能力與我們的野生願望相吻合！驅動VR採用及其價值的一件事是內容。我們需要在那裡獲取VR內容供VR用戶享受！有什麼比通過網絡更好，更容易的方法？

>

>如果您嘗試使用此代碼構建VR演示，請在評論中分享或在Twitter上與我聯繫（@thatpatrickguy）。我很想戴上我的Oculus Rift或Google Cardboard，然後將其旋轉！

>

>我通過JavaScript在VR和AR上有一組策劃的鏈接，以尋求快速參考。前往Dev Diner，並使用JavaScript開發人員指南查看我的Dev Diner VR和AR，並包含本文中提到的兩個鏈接，其他很棒的Sitepoint文章等。如果您還有其他很棒的資源，我沒有列出過 - 請告訴我！

>

經常詢問有關在網絡上構建VR的問題

>在網絡上構建VR的前提是什麼？您還應該熟悉用於渲染2D和3D圖形的JavaScript API WebGL。 Trix.js的知識是一個流行的JavaScript庫，用於創建3D圖形，也是有益的。此外，您應該有一個VR耳機來測試您的VR體驗。

>

>如何使用JavaScript？

javascript以及諸如three.js和a-frame之類的庫，可以用於創建VR體驗。三。 js簡化了使用WebGL的過程，而A框架允許您使用類似於HTML的語法構建VR場景。您可以使用這些工具創建3D對象，添加紋理和照明以及控制攝像機移動。

什麼是WebVR，它與Web上的VR有何關係？

webvr是JavaScript API這為Web瀏覽器中的各種虛擬現實設備（例如Oculus Rift，HTC Vive和Google Cardboard）提供了支持。它允許開發人員在網絡上創建沉浸式的VR體驗，這些體驗可供擁有VR設備和兼容瀏覽器的任何人訪問。

我可以使用JavaScript以外的其他編程語言在網上構建VR？ 🎜> JavaScript是包括VR在內的Web開發的主要語言。但是，您可以使用編譯為JavaScript的語言，例如TypeScript或CoffeeScript。此外，WebAssembly允許您在瀏覽器中以近距離速度以C等語言編寫代碼。

如何優化網絡的VR體驗？ Web涉及減少延遲，有效地管理內存和優化渲染。您可以使用異步加載，紋理壓縮和細節級別（LOD）等技術來提高性能。另外，考慮用戶硬件和網絡條件的局限性。

>如何使我的VR體驗可供沒有VR設備的用戶訪問？

您可以為沒有VR設備的用戶創建後備。例如，您可以使用設備方向API來允許用戶通過移動其移動設備來探索VR場景。您還可以提供360度的視圖，用戶可以使用鼠標或觸摸進行導航。

如何在網絡上測試我的VR體驗？

您可以使用vr經驗來測試您的VR體驗VR耳機。如果您沒有耳機，則可以將WebVR仿真器擴展用於Chrome和Firefox。該工具模擬WebVR API並提供了VR場景的3D視圖。

>

>如何將我的VR Creations從Thrix.js導出到A-FRAME？

您可以使用GLTF Exporter以三個js的形式以A框架可以讀取的格式導出3D模型。 GLTF（GL傳輸格式）是用於3D場景和型號的標准文件格式。

在網絡上構建VR時，我可能會面臨哪些挑戰？

>一些挑戰包括在3D環境中處理用戶輸入，優化性能以及確保在不同的VR設備和瀏覽器上兼容。此外，創建現實的3D圖形和動畫可能很複雜。

>在哪裡可以了解有關在網絡上構建VR的更多信息？ Mozilla的WebVR文檔是一個很好的起點。您還可以在三個和A框網站上查看教程和示例。此外，在許多在線社區中，您可以提出問題並分享您的作品。

>

以上是今天如何在網絡上構建VR的詳細內容。更多資訊請關注PHP中文網其他相關文章！