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

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

• JavaScript，Three.js 和監視設備朝向
• JavaScript，Three.js 和 WebVR（我最近比較喜歡的方式）
• CSS 和 WebVR（時日尚早）

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

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

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

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

• (使用谷歌 Cardboard 和Three.js實現基于Web的虛擬現實)
• (使用 Three.js 和 Node 可視化Twitter 流)

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

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

• 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 值，那么我們就可以使用設備朝向控制攝像頭。如果用戶輕擊屏幕，我們還可將場景在全屏模式下呈現（我們可不想在虛擬現實下看到瀏覽器地址欄）。在可用設備上，設備朝向事件監聽器提供一組 alpha，beta 和 gamma 值。如果沒有 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);

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

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

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

navigator.getVRDevices;

上面說的更簡單的實現 WebVR API 的方法是使用。在不同的設備上，它可以保證基本的 WebVR 功能，同時考慮到用戶體驗上的優雅降級。它是我至今經過的最好的 web 虛擬現實實現。如果你在找尋基于 web 的虛擬現實實現方案，這便是當前最好的選擇。我不會在這里講太多細節（在之后 SitePoint 上的文章中我會講更多細節的東西），如果你對細節感興趣的話可以看看 。我不講細節的原因是有更簡單的方法實現 API。

要開始使用此方法，先下載 。

你可以使用其中的文件，專心編輯 index.html，或者你也可以從草稿開始實現特定的插件。如果你想比較兩者的區別，我已經把上面提過的 遷移到  了。

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

• 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 支持不完善的瀏覽器的填充工具（可以從 上找到，或者從樣板項目找到 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);

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

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

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

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

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

我們像這樣去調用渲染,它使用的 timestamp 變量是來自 three.js 的 update() 方法：如果VR管理器在一個可兼容的瀏覽器里，那么它會提供一個可以讓我們進入VR 模塊的按鈕，如果它們的瀏覽器不支持 VR，那么進入全屏（全屏是我們為移動端準備的）。hideButton 參數表示我們是否想隱藏按鈕或不隱藏按鈕，我們定義為不隱藏！

function update(timestamp) {
  controls.update();
  manager.render(scene, camera, timestamp);}

WebVR Boilerplate在行動中是什么樣子的：在所有的地方，你都應該讓 VR 根據設備的不同而轉化它本身的實現。

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

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

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

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

CSS 和 WebVR

Mozilla 計劃將虛擬現實呈現能力也加到旗下的 Firefox 瀏覽器 Nightly 版本中，當然當前還處于非常早起的階段！我運氣不是太好，沒能在我的 Mac 和 Oculus 設備上讓其工作。來自 Firefox 的  承諾將 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 更好更簡單的方式嗎？

本文轉自《開源中國》，譯者 陶大頭、祝青、無若