有人認為虛擬現實將在 2020 年達到 70 億美元的價值。在那之前，web 肯定不會一直停留于 2D 環境。實際上，已經有一些簡單的方法可以將虛擬現實帶進瀏覽器了。而且那弄起來也非常有趣！

要開始你的虛擬 Web 開發之旅，有這么三種可行的方式：

• JavaScript，Three.js 和監視設備朝向

• JavaScript，Three.js 和 WebVR（我最近比較喜歡的方式）

• CSS 和 WebVR（時日尚早）

我會將每一種方式都過一遍，簡要展示下它們各自是如何工作的。

JavaScript，Three.js 和監視設備朝向

當前，大多數基于瀏覽器的虛擬現實項目都是利用瀏覽器的 deviceorientation 事件。此事件告訴瀏覽器設備的朝向，而且允許瀏覽器在設備旋轉或傾斜時有所動作。從虛擬現實的角度看，此功能允許你偵測到某人看向某個方向，然后你可以調整攝像頭以跟隨他的視線。

為了在瀏覽器里獲得良好的 3D 場景，我們使用一個可以方便地創建 3D 形狀和場景的 JavaScript 框架three.js。它封裝了創建 3D 內容的大部分復雜性，讓你可以專注于把你希望的東西放進你的場景。

我在 SitePoint 上寫過兩個使用設備朝向方法的示例：

• Bringing VR to the Web with Google Cardboard and Three.js(使用谷歌 Cardboard 和Three.js實現基于Web的虛擬現實)

• Visualizing a 推ter Stream in VR with Three.js and Node(使用 Three.js 和 Node 可視化推ter 流)

如果你不熟悉 three.js 和組建場景，我推薦你看一下上面的兩篇文章以更深入的理解此方法。我將只大致介紹下主要概念。

下面是要用到的關鍵 JavaScript 文件（你可以從上面的示例中獲取，也可以 從three.js 例子下載）：

• three.min.js– three.js 框架

• DeviceOrientationControls.js– 這是一個 three.js 插件，它幫助我們完成之前提到過的監視設備朝向，可以另攝像頭根據設備的移動進行調整。

• OrbitControls.js– 這是一個備用的控制器，它可以在沒有設備朝向事件的時候用鼠標調整攝像頭。

• StereoEffect.js– 這是一個 three.js 的效果插件，可以針對每只眼睛對畫面進行細微的角度調整，就像虛擬現實該有的立體效果。這使得我們不用做任何復雜的工作，就可以創造實打實的虛擬現實分屏效果。

設備朝向

使用設備朝向控制的代碼大致如下：

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

在可用設備上，設備朝向事件監聽器提供一組 alpha，beta 和 gamma 值。如果沒有 alpha 值就不能通過設備朝向進行控制，轉而替代的是軌道控制。

如果有 alpha 值，那么我們就可以使用設備朝向控制攝像頭。如果用戶輕擊屏幕，我們還可將場景在全屏模式下呈現（我們可不想在虛擬現實下看到瀏覽器地址欄）。

軌道控制

如果 alpha 值不存在，我們也就不可以訪問設備的定位事件，這替代了通過攝像頭拖拽鼠標的技術。這看起來就像這樣：

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

主要可能混亂的代碼是上面的 noPan 和 noZoom。基本上，我們不需要通過鼠標移動身體的場景，我們也不希望能夠放大或縮小 —— 我只是想環視。

立體效果

為了使用立體效果，我們先這么定義：

effect = new THREE.StereoEffect(renderer);

然后再窗口重設尺寸時，相應更新它的尺寸：

effect.setSize(width, height);

在每次 requestAnimationFrame 的時候，使用效果渲染場景：

effect.render(scene, camera);

以上便是使用設備朝向方法達到虛擬現實的基本方法。這種方法對于簡易的 Google Cardboard 實現效率還可以，但在 Oculus Rift 上就不是太高效了。下面要介紹的方法在 Rift 上表現得要好得多。

JavaScript，Three.js 和 WebVR

對像是 Oculus Rift 這樣的頭戴式虛擬設備的朝向感興趣？WebVR 是當前可行的方法。WebVR 是一種先鋒的實驗性質的 JavaScript 的 API，它提供訪問 Oculus Rift 和 Google Cardboard 等虛擬設備的能力。當前，它在 Firefox Nightly 和一些experimental builds of Mobile Chrome and Chromium 上可用。需要記住的一點是，WebVR 的細節依然在草稿階段且隨時可能會改變，所以可以拿它做一些實驗，而且過些時候你可能需要做一些調整。

總之，WebVR API 可以讓你通過如下方式訪問虛擬現實設備：

navigator.getVRDevices

我不會在這里講太多細節（在之后 SitePoint 上的文章中我會講更多細節的東西），如果你對細節感興趣的話可以看看 the WebVR editor’s draft。我不講細節的原因是有更簡單的方法實現 API。

上面說的更簡單的實現 WebVR API 的方法是使用 WebVR Boilerplate from Boris Smus。在不同的設備上，它可以保證基本的 WebVR 功能，同時考慮到用戶體驗上的優雅降級。它是我至今經過的最好的 web 虛擬現實實現。如果你在找尋基于 web 的虛擬現實實現方案，這便是當前最好的選擇。

要開始使用此方法，先下載 WebVR Boilerplate on Github。

你可以使用其中的文件，專心編輯 index.html，或者你也可以從草稿開始實現特定的插件。如果你想比較兩者的區別，我已經把上面提過的 Visualizing a 推ter Stream in VR with Three.js and Node遷移到 WebVR powered 推ter Stream in VR 了。

要把此項目加到你自己的草稿上，你需要這些文件：

• three.min.js – 當然是我們的 three.js 框架

• VRControls.js – 一個 three.js 插件，用于通過 WebVR 進行虛擬現實的控制 （可以從樣板項目找到 bower_components/threejs/examples/js/controls/VRControls.js）

• VREffect.js – 一個 three.js 插件，用于在 Oculus Rift 上顯示虛擬現實效果的畫面（可以從樣板項目找到 bower_components/threejs/examples/js/effects/VREffect.js）

• webvr-polyfill.js – 這是一個用于對 WebVR 支持不完善的瀏覽器的填充工具（可以從GitHub 上找到，或者從樣板項目找到 bower_components/webvr-polyfill/build/webvr-polyfill.js）

• webvr-manager.js – 這是樣板代碼的一部分，它管理所有的東西，包括提供進入和離開虛擬現實模式的方法（可以從 build/webvr-manager.js 找到）

實現它僅需要稍微調整下設備朝向方法。以下是給想嘗試的朋友的一份綜述：

控制器

VR 控制器是很容易創建的，我們只需要通過創建一個 VRControls 對象給我們之前使用的 controls 變量就可以了。由于 Boilerplate 目前應該注意瀏覽器沒有 VR 功能，因此軌跡控制器和設備方式控制器不是必須的。這意味著你的動畫應該依然在 Google Cardboard 上能夠很好的運行

controls = new THREE.VRControls(camera);

VR Effect

Effect 是非常類似于實現了 StereoEffect 類的類。只不過用新的 VREffect 類替換了原來的：

effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

然而，在這個方法里我們不會通過 Effect 渲染，而是，通過我們的 VR 管理器來渲染。

VR管理器

VR 管理器關注我們所有進入或退出 VR 等等諸如此類的，因此這是我們的場景最終渲染的地方。我們通過下面的方式初始化管理器：

manager = new WebVRManager(renderer, effect, {hideButton: false});

如果VR管理器在一個可兼容的瀏覽器里，那么它會提供一個可以讓我們進入VR 模塊的按鈕，如果它們的瀏覽器不支持 VR，那么進入全屏（全屏是我們為移動端準備的）。hideButton 參數表示我們是否想隱藏按鈕或不隱藏按鈕，我們定義為不隱藏！

我們像這樣去調用渲染,它使用的 timestamp 變量是來自 three.js 的 update() 方法：

function update(timestamp) {
  controls.update();

  manager.render(scene, camera, timestamp);}

在所有的地方，你都應該讓 VR 根據設備的不同而轉化它本身的實現。

Isrenderer.getSize() 返回一個錯誤？這讓我抓狂了幾個小時，但是要想修改這個錯誤——更新 three.js!

WebVR Boilerplate在行動中是什么樣子的

這是我在 推ter 上的例子的視圖在支持 VR 的瀏覽器上的樣子:

這是在 Oculus Rift 視圖里當你點擊 VR 圖標時的樣子:

這是在手機上的樣子，設備方向仍然允許我們旋轉場景，但是我沒有截屏。一個很好的滿足響應試的視圖:

如果我們在手機上點擊VR圖標，我們就能得到為 Google Cardboard 樣式設備提供的全屏視圖:

CSS 和 WebVR

Mozilla 計劃將虛擬現實呈現能力也加到旗下的 Firefox 瀏覽器 Nightly 版本中，當然當前還處于非常早起的階段！我運氣不是太好，沒能在我的 Mac 和 Oculus 設備上讓其工作。來自 Firefox 的 Vladimir Vuki?evi? 承諾將 CSS 3D 變換整合進虛擬現實全屏模式。

Vladimir 的博客中有個示例，指出標記了 transform-style: preserve-3d 的元素需要為兩個視角分別渲染，以達到虛擬現實：

#css-square {
  position: absolute;
  top: 0; left: 0;

  transform-style: preserve-3d;
  transform: translate(100px, 100px, 100px);
  width: 250px;
  height: 250px;
  background: blue;}

如果你知道任何使用虛擬現實和 CSS 的示例，請告知我！我還沒發現任何相關的。將 web 中的 HTML 和 CSS 用到虛擬現實，這個主意無疑是個有趣的概念。真是不可思議，web 就要進入虛擬現實的國度，我們慢慢開始接觸虛擬現實設備！

總結

在接下來幾年里，技術世界將緩慢但切實地擁抱虛擬現實，前提是我們的技術跟得上我們的野心！促進虛擬現實的普及與價值的內容。我們得為用戶準備好可以享用的虛擬現實內容！有比 web 更好更簡單的方式嗎？

如果你感興趣并且用這些代碼構建了一個虛擬現實示例，請在評論中分享或者在推ter(@thatpatrickguy)上聯系我。我很樂意把它放到我的 Oculus Rift 或 Google Cardborad 上瞧一瞧！

我收集了一堆關于通過 JavaScript 實現虛擬現實和增強現實的鏈接，權當大家一個參考。到 Dev Diner 看看我的 Dev Diner VR and AR with JavaScript Developer Guide，它囊括了這篇文章中提及的鏈接，以及其它 SitePoint 上的文章等。如果你有其他不錯的而我沒列出的資源，也請告知我！