有人認為虛拟現實将在 2020 年達到 70 億美元的價值。在那之前，web 肯定不會一直停留于 2d 環境。實際上，已經有一些簡單的方法可以将虛拟現實帶進浏覽器了。而且那弄起來也非常有趣！
要開始你的虛拟 web 開發之旅，有這麼三種可行的方式：
我會将每一種方式都過一遍，簡要展示下它們各自是如何工作的。
目前，大多數基于浏覽器的虛拟現實項目都是利用浏覽器的 deviceorientation 事件。此事件告訴浏覽器裝置的朝向，而且允許浏覽器在裝置旋轉或傾斜時有所動作。從虛拟現實的角度看，此功能允許你偵測到某人看向某個方向，然後你可以調整攝像頭以跟随他的視線。
為了在浏覽器裡獲得良好的 3d 場景，我們使用一個可以友善地建立 3d 形狀和場景的 javascript 架構three.js。它封裝了建立 3d 内容的大部分複雜性，讓你可以專注于把你希望的東西放進你的場景。
我在 sitepoint 上寫過兩個使用裝置朝向方法的示例：
如果你不熟悉 three.js 群組建場景，我推薦你看一下上面的兩篇文章以更深入的了解此方法。我将隻大緻介紹下主要概念。
下面是要用到的關鍵 javascript 檔案（你可以從上面的示例中擷取，也可以 從three.js 例子下載下傳）：
使用裝置朝向控制的代碼大緻如下：
在可用裝置上，裝置朝向事件監聽器提供一組 alpha，beta 和 gamma 值。如果沒有 alpha 值就不能通過裝置朝向進行控制，轉而替代的是軌道控制。
如果有 alpha 值，那麼我們就可以使用裝置朝向控制攝像頭。如果使用者輕擊螢幕，我們還可将場景在全屏模式下呈現（我們可不想在虛拟現實下看到浏覽器位址欄）。
如果 alpha 值不存在，我們也就不可以通路裝置的定位事件，這替代了通過攝像頭拖拽滑鼠的技術。這看起來就像這樣：
主要可能混亂的代碼是上面的 nopan 和 nozoom。基本上，我們不需要通過滑鼠移動身體的場景，我們也不希望能夠放大或縮小 —— 我隻是想環視。
為了使用立體效果，我們先這麼定義：
然後再視窗重設尺寸時，相應更新它的尺寸：
在每次 requestanimationframe 的時候，使用效果渲染場景：
以上便是使用裝置朝向方法達到虛拟現實的基本方法。這種方法對于簡易的 google cardboard 實作效率還可以，但在 oculus rift 上就不是太高效了。下面要介紹的方法在 rift 上表現得要好得多。
對像是 oculus rift 這樣的頭戴式虛拟裝置的朝向感興趣？webvr 是目前可行的方法。webvr 是一種先鋒的實驗性質的 javascript 的 api，它提供通路 oculus rift 和 google cardboard 等虛拟裝置的能力。目前，它在 firefox nightly 和一些experimental builds of mobile chrome and chromium 上可用。需要記住的一點是，webvr 的細節依然在草稿階段且随時可能會改變，是以可以拿它做一些實驗，而且過些時候你可能需要做一些調整。
總之，webvr api 可以讓你通過如下方式通路虛拟現實裝置：
我不會在這裡講太多細節（在之後 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 twitter stream in vr with three.js and node遷移到 webvr powered twitter stream in vr 了。
要把此項目加到你自己的草稿上，你需要這些檔案：
實作它僅需要稍微調整下裝置朝向方法。以下是給想嘗試的朋友的一份綜述：
vr 控制器是很容易建立的，我們隻需要通過建立一個 vrcontrols 對象給我們之前使用的 controls 變量就可以了。由于 boilerplate 目前應該注意浏覽器沒有 vr 功能，是以軌迹控制器和裝置方式控制器不是必須的。這意味着你的動畫應該依然在 google cardboard 上能夠很好的運作
effect 是非常類似于實作了 stereoeffect 類的類。隻不過用新的 vreffect 類替換了原來的：
然而，在這個方法裡我們不會通過 effect 渲染，而是，通過我們的 vr 管理器來渲染。
vr 管理器關注我們所有進入或退出 vr 等等諸如此類的，是以這是我們的場景最終渲染的地方。我們通過下面的方式初始化管理器：
如果vr管理器在一個可相容的浏覽器裡，那麼它會提供一個可以讓我們進入vr 子產品的按鈕，如果它們的浏覽器不支援 vr，那麼進入全屏（全屏是我們為移動端準備的）。hidebutton 參數表示我們是否想隐藏按鈕或不隐藏按鈕，我們定義為不隐藏！
我們像這樣去調用渲染,它使用的 timestamp 變量是來自 three.js 的 update() 方法：
在所有的地方，你都應該讓 vr 根據裝置的不同而轉化它本身的實作。
isrenderer.getsize() 傳回一個錯誤？這讓我抓狂了幾個小時，但是要想修改這個錯誤——更新 three.js!
這是我在 twitter 上的例子的視圖在支援 vr 的浏覽器上的樣子:
這是在 oculus rift 視圖裡當你點選 vr 圖示時的樣子:
這是在手機上的樣子，裝置方向仍然允許我們旋轉場景，但是我沒有截屏。一個很好的滿足響應試的視圖:
如果我們在手機上點選vr圖示，我們就能得到為 google cardboard 樣式裝置提供的全屏視圖:
mozilla 計劃将虛拟現實呈現能力也加到旗下的 firefox 浏覽器 nightly 版本中，當然目前還處于非常早起的階段！我運氣不是太好，沒能在我的 mac 和 oculus 裝置上讓其工作。來自 firefox 的 vladimir vukićević 承諾将 css 3d 變換整合進虛拟現實全屏模式。
vladimir 的部落格中有個示例，指出标記了 transform-style: preserve-3d 的元素需要為兩個視角分别渲染，以達到虛拟現實：
如果你知道任何使用虛拟現實和 css 的示例，請告知我！我還沒發現任何相關的。将 web 中的 html 和 css 用到虛拟現實，這個主意無疑是個有趣的概念。真是不可思議，web 就要進入虛拟現實的國度，我們慢慢開始接觸虛拟現實裝置！
在接下來幾年裡，技術世界将緩慢但切實地擁抱虛拟現實，前提是我們的技術跟得上我們的野心！促進虛拟現實的普及與價值的内容。我們得為使用者準備好可以享用的虛拟現實内容！有比 web 更好更簡單的方式嗎？
如果你感興趣并且用這些代碼建構了一個虛拟現實示例，請在評論中分享或者在twitter(@thatpatrickguy)上聯系我。我很樂意把它放到我的 oculus rift 或 google cardborad 上瞧一瞧！
我收集了一堆關于通過 javascript 實作虛拟現實和增強現實的連結，權當大家一個參考。到 dev diner 看看我的 dev diner vr and ar with javascript developer guide，它囊括了這篇文章中提及的連結，以及其它 sitepoint 上的文章等。如果你有其他不錯的而我沒列出的資源，也請告知我！