有人認(rèn)為虛擬現(xiàn)實(shí)將在 2020 年達(dá)到 70 億美元的價(jià)值。在那之前，web 肯定不會(huì)一直停留于 2D 環(huán)境。實(shí)際上，已經(jīng)有一些簡(jiǎn)單的方法可以將虛擬現(xiàn)實(shí)帶進(jìn)瀏覽器了。而且那弄起來也非常有趣！

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

• JavaScript，Three.js 和監(jiān)視設(shè)備朝向
• JavaScript，Three.js 和 WebVR（我最近比較喜歡的方式）
• CSS 和 WebVR（時(shí)日尚早）

JavaScript，Three.js 和監(jiān)視設(shè)備朝向

當(dāng)前，大多數(shù)基于瀏覽器的虛擬現(xiàn)實(shí)項(xiàng)目都是利用瀏覽器的事件。此事件告訴瀏覽器設(shè)備的朝向，而且允許瀏覽器在設(shè)備旋轉(zhuǎn)或傾斜時(shí)有所動(dòng)作。從虛擬現(xiàn)實(shí)的角度看，此功能允許你偵測(cè)到某人看向某個(gè)方向，然后你可以調(diào)整攝像頭以跟隨他的視線。

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

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

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

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

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

• three.min.js– three.js 框架
• DeviceOrientationControls.js– 這是一個(gè) three.js 插件，它幫助我們完成之前提到過的監(jiān)視設(shè)備朝向，可以另攝像頭根據(jù)設(shè)備的移動(dòng)進(jìn)行調(diào)整。
• OrbitControls.js– 這是一個(gè)備用的控制器，它可以在沒有設(shè)備朝向事件的時(shí)候用鼠標(biāo)調(diào)整攝像頭。
• StereoEffect.js– 這是一個(gè) three.js 的效果插件，可以針對(duì)每只眼睛對(duì)畫面進(jìn)行細(xì)微的角度調(diào)整，就像虛擬現(xiàn)實(shí)該有的立體效果。這使得我們不用做任何復(fù)雜的工作，就可以創(chuàng)造實(shí)打?qū)嵉奶摂M現(xiàn)實(shí)分屏效果。

設(shè)備朝向

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

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 值，那么我們就可以使用設(shè)備朝向控制攝像頭。如果用戶輕擊屏幕，我們還可將場(chǎng)景在全屏模式下呈現(xiàn)（我們可不想在虛擬現(xiàn)實(shí)下看到瀏覽器地址欄）。在可用設(shè)備上，設(shè)備朝向事件監(jiān)聽器提供一組 alpha，beta 和 gamma 值。如果沒有 alpha 值就不能通過設(shè)備朝向進(jìn)行控制，轉(zhuǎn)而替代的是軌道控制。

軌道控制

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

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。基本上，我們不需要通過鼠標(biāo)移動(dòng)身體的場(chǎng)景，我們也不希望能夠放大或縮小 —— 我只是想環(huán)視。

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

effect = new THREE.StereoEffect(renderer);

然后再窗口重設(shè)尺寸時(shí)，相應(yīng)更新它的尺寸：

effect.setSize(width, height);

在每次 requestAnimationFrame 的時(shí)候，使用效果渲染場(chǎng)景：

effect.render(scene, camera);

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

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

總之，WebVR API 可以讓你通過如下方式訪問虛擬現(xiàn)實(shí)設(shè)備：

navigator.getVRDevices;

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

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

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

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

• three.min.js – 當(dāng)然是我們的 three.js 框架
• VRControls.js – 一個(gè) three.js 插件，用于通過 WebVR 進(jìn)行虛擬現(xiàn)實(shí)的控制 （可以從樣板項(xiàng)目找到 bower_components/threejs/examples/js/controls/VRControls.js）
• VREffect.js – 一個(gè) three.js 插件，用于在 Oculus Rift 上顯示虛擬現(xiàn)實(shí)效果的畫面（可以從樣板項(xiàng)目找到 bower_components/threejs/examples/js/effects/VREffect.js）
• webvr-polyfill.js – 這是一個(gè)用于對(duì) WebVR 支持不完善的瀏覽器的填充工具（可以從 上找到，或者從樣板項(xiàng)目找到 bower_components/webvr-polyfill/build/webvr-polyfill.js）
• webvr-manager.js – 這是樣板代碼的一部分，它管理所有的東西，包括提供進(jìn)入和離開虛擬現(xiàn)實(shí)模式的方法（可以從 build/webvr-manager.js 找到）

實(shí)現(xiàn)它僅需要稍微調(diào)整下設(shè)備朝向方法。以下是給想嘗試的朋友的一份綜述：

控制器

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

controls = new THREE.VRControls(camera);

Effect 是非常類似于實(shí)現(xiàn)了 StereoEffect 類的類。只不過用新的 VREffect 類替換了原來的：VR Effect

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

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

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

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

我們像這樣去調(diào)用渲染,它使用的 timestamp 變量是來自 three.js 的 update() 方法：如果VR管理器在一個(gè)可兼容的瀏覽器里，那么它會(huì)提供一個(gè)可以讓我們進(jìn)入VR 模塊的按鈕，如果它們的瀏覽器不支持 VR，那么進(jìn)入全屏（全屏是我們?yōu)橐苿?dòng)端準(zhǔn)備的）。hideButton 參數(shù)表示我們是否想隱藏按鈕或不隱藏按鈕，我們定義為不隱藏！

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

WebVR Boilerplate在行動(dòng)中是什么樣子的：在所有的地方，你都應(yīng)該讓 VR 根據(jù)設(shè)備的不同而轉(zhuǎn)化它本身的實(shí)現(xiàn)。

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

這是在 Oculus Rift 視圖里當(dāng)你點(diǎn)擊 VR 圖標(biāo)時(shí)的樣子:

這是在手機(jī)上的樣子，設(shè)備方向仍然允許我們旋轉(zhuǎn)場(chǎng)景，但是我沒有截屏。一個(gè)很好的滿足響應(yīng)試的視圖:

如果我們?cè)谑謾C(jī)上點(diǎn)擊VR圖標(biāo)，我們就能得到為 Google Cardboard 樣式設(shè)備提供的全屏視圖:

CSS 和 WebVR

Mozilla 計(jì)劃將虛擬現(xiàn)實(shí)呈現(xiàn)能力也加到旗下的 Firefox 瀏覽器 Nightly 版本中，當(dāng)然當(dāng)前還處于非常早起的階段！我運(yùn)氣不是太好，沒能在我的 Mac 和 Oculus 設(shè)備上讓其工作。來自 Firefox 的  承諾將 CSS 3D 變換整合進(jìn)虛擬現(xiàn)實(shí)全屏模式。

Vladimir 的博客中有個(gè)示例，指出標(biāo)記了 transform-style: preserve-3d 的元素需要為兩個(gè)視角分別渲染，以達(dá)到虛擬現(xiàn)實(shí)：

#css-square {
  position: absolute;
  top: 0; left: 0;
  transform-style: preserve-3d;
  transform: translate(100px, 100px, 100px);
  width: 250px;
  height: 250px;
  background: blue;}

總結(jié)果你知道任何使用虛擬現(xiàn)實(shí)和 CSS 的示例，請(qǐng)告知我！我還沒發(fā)現(xiàn)任何相關(guān)的。將 web 中的 HTML 和 CSS 用到虛擬現(xiàn)實(shí)，這個(gè)主意無疑是個(gè)有趣的概念。真是不可思議，web 就要進(jìn)入虛擬現(xiàn)實(shí)的國度，我們慢慢開始接觸虛擬現(xiàn)實(shí)設(shè)備！

在接下來幾年里，技術(shù)世界將緩慢但切實(shí)地?fù)肀摂M現(xiàn)實(shí)，前提是我們的技術(shù)跟得上我們的野心！促進(jìn)虛擬現(xiàn)實(shí)的普及與價(jià)值的內(nèi)容。我們得為用戶準(zhǔn)備好可以享用的虛擬現(xiàn)實(shí)內(nèi)容！有比 web 更好更簡(jiǎn)單的方式嗎？

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