【51CTO.com快譯】2016年一開始，虛擬現實應用就進展得熱火朝天，到處都在銷售VR耳機這一事實就足夠證明這一點。如今，虛擬現實技術發展已引起平臺開發商們越來越多的關注，因為這些技術正迎合這些狂熱的開發商們的口味。其中，Unity和Unreal引擎帶給人們最激動人心的功能之一便是支持開發人員在虛擬現實中即時地編輯虛擬現實場景。令WebVR和JavaScript程序員興奮的是，如今已經出現了一款支持WebVR原型化開發及有關實驗的新框架——Primrose。

一、 何謂Primrose

何謂Primrose？其官方網站（http://www.primrosevr.com/）描述如下：

Primrose是一個跨瀏覽器、支持多種設備并且支持在WebVR應用程序中開發生產工具類應用的軟件開發框架。

Primrose為開發人員提供了一種很好的框架，使其可以在他們的瀏覽器中打開應用程序、試驗新的想法和探索在VR場景中的外觀模樣。它是一個開源框架，目前還很新穎，但在迅速發展中。

二、 準備工作

如果你想使用Primrose進行WebVR相關的試驗，那么你需要作如下準備工作：

l 一個支持WebGL的瀏覽器，***是支持WebVR功能，例如***的Chromium WebVR版本或者Firefox Nightly。

l 一部Oculus Rift耳機（也可以是HTC Vive）或者Google Cardboard；然而，你也可以在沒有耳機的情況下在瀏覽器中進行試驗！

l 某種Web服務器——一個本地服務器即可，例如WAMP、MAMP、靜態Node服務器、靜態Python服務器，等等，都能勝任。

l 能夠觸摸式輸入——在虛擬現實環境中你不必看到你的鍵盤。

三、 開始工作

你可以在Primrose的官方網站（http://www.primrosevr.com/examples/editor3d/index.html）嘗試一個完全可工作版本的實時編碼操作（前提是：一定要使用一個支持WebGL功能的瀏覽器打開這個站點。例如，使用就像上文提到的那些瀏覽器即可；否則，你只會看到一個靜態的屏幕截圖）。

當然，如果你想自己在本地運行程序的副本，你可以從Primrose GitHub倉庫（https://github.com/capnmidnight/Primrose/archive/master.zip）中下載/克隆其實例的***版本。

四、 基于GitHub網站的簡化版本

在本文中，我提供了一個簡化版本的現場編碼的展示實例。此實例中使用了與Primrose示例一樣的代碼，只是為了易于說明起見減少了一些功能。為了與本文論述觀點保持一致，你可以打開網址https://github.com/sitepoint-editors/Primrose-Simplified-Editor找到GitHub上的那個版本。

五、 運行本地服務器

要運行我們的簡化版本的現場編碼實例，你只需把它復制到你的本地服務器上，然后在你的支持WebGL的瀏覽器中打開該位置。（例如http://localhost/primrose甚至只有http://localhost，如果你把它放到你的服務器的根目錄下的話）

注意：這將不會從你的文件系統運行！如果你想從一個例如file:///Users/yourname/primrose/index.html這樣的位置運行它，程序將崩潰；因為瀏覽器不會給予JavaScript權限去訪問有關紋理文件。

上述程序啟動后，你將能夠看到如下圖所示的樣子：

 

 

如果你在這個場景中環顧一下四周，你將看到一個立即可用的代碼編輯器。你可以把你的光標指向代碼行，在代碼處點擊一下光標，然后就像你使用常規文本編輯器鍵入內容一樣輸入內容。例如，如果我們正好在for循環語句（for (var i = 0; i < 10; i++)）中的10后點擊一下，然后把語句修改為for (var i = 0; i < 100; i++)，像下圖中箭頭所指的樣子：

 

那么，你會注意到我們的場景也會實時地改變——由這個for循環創建的100個長方體塊在場景中隨機移動！

 

如果你想從不同的角度更好地看看它，你可以看看地板并點擊你想要移動到哪里：

 

你還可以使用鍵盤上的箭頭鍵在上述場景中來回走動。

六、 工作原理

大多數情況下，你不需要重新編譯構建Primrose官方提供的現場編輯器實例，而只需要簡單地從GitHub網站上把這些代碼復制到你自己的場景中即可。但是，在本文中，我想我已經提供給您探索Primrose框架應用有關概念的一些簡化版本實例。

接下來，請看一下我們的Primrose應用程序的開頭部分，如下面代碼所示：

 

上面代碼定義了三個紋理文件，然后實例化我們的Primrose程序，并把其實例賦值給變量app。其中的Primrose.BrowserEnvironment()方法負責使用給定的天空盒與場地紋理搭建起我們的場景。

另外，我們還要使用一個變量editorFrame，它負責為我們的編輯器構建2048 X 2048大小的場景：

 

另外，所有Primrose程序的都會有的一些功能包括：使用語句addEventListener("ready", function() {});初始化我們的元素，等等。例如，我們添加如下內容：

l subScene：可以在我們的現場編輯器中添加或者更改元素。

l editor：我們場景中的現場編輯器（稍后我們會更詳細地討論）。

l getSourceCode()：在此初始化代碼。在我們的簡化版本程序中，它負責檢索Primrose編輯器中提供的代碼片斷并把這些代碼顯示于我們自己的VR文本編輯器中。當然，在更復雜的編輯器中，可以借助于本地存儲實現更多的功能。

 

Primrose最近又發行了一個新的版本。在該版本中，通過在Primrose.Text中引入一些新的框架對象進一步改造了編輯器。具體包括如下一些方面：

l Primrose.Text.Controls.TextBox：負責構建一個文本區域并提供一些默認功能。

l Primrose.Text.Rectangle：它允許我們為文本區域定義一個顯示內容的長方形邊界。在前面代碼中我們定義editorFrame時你可能已經注意到。

l Primrose.Text.Grammars.JavaScript：用于記號鍵內設置JavaScript代碼高亮顯示功能。你可以通過調用Primrose.Text.Grammars.PlainText實現純文本的高亮顯示。

在編寫Primrose應用程序時，除了已有的“ready”事件外，還有幾個事件需要引起你的關注，包括：

l "update"事件：這是我們的示例編輯器代碼中唯一使用的另一個事件。它負責運行每一幀。你可以在Primrose程序中使用它來運行動畫并檢查場景內的有關更新操作。

l "keydown"，"keyup"和"keypress"事件：當按下鍵、松開鍵時使用這些事件。

l "mousedown"和"mouseup"事件：同上，只是與鼠標有關。

l "mousemove"事件：檢測鼠標移動。

l "wheel"事件：檢測用戶移動鼠標滾輪時使用。

l "touchstart"，"touchend"和"touchmove"事件：當手指通過觸屏按下場景中的某一個元素時、抬起手指時和在屏幕上滑動時檢測這些事件。

l "unload"事件：當程序即將關閉時觸發此事件。但是，我提供的簡化版本的編輯器中并沒有實現此功能；而完整版本的Primrose編輯器使用這一事件實現把編輯器中內容保存到本地存儲中。

l "load"事件：當程序再次加載時啟用此事件。

l "pointerstart"，"pointerend"和"pointermove"事件：相應于場景中對象的點擊和觸摸操作。

l "gazestart"事件：當用戶觀看場景中某對象的瞬間觸發此事件。

l "gazecomplete"事件：當用戶觀看場景中某對象有默認的一秒鐘時觸發此事件。

l "gazecancel"事件：當用戶觀看場景中某對象不足默認的一秒鐘時觸發此事件。當然，你可以通過修改gazeLength屬性值來修改默認的一秒鐘時間，只是這已經不在本文討論范圍之內。

各位請注意：篇幅所限，在本文中我不會展示更多的代碼，有興趣的朋友可以自行參考前面提供的GitHub倉庫地址處。但是，我們還是要簡要了解一下上面的某些事件的響應及實現的功能，等等。

在我提供的簡化版本程序中的update事件中，它負責檢查編輯器中的任何代碼更改，并且在每一個scriptUpdateTimeout調用（每隔半秒觸發一次）時更新它們，并負責運行它所知道的任何動畫。

在keydown事件中，它負責清除scriptUpdateTimeout調用，當程序試圖更新內容時它會延遲一些時間。

每一次scriptUpdateTimeout執行結束時都會運行UpdateScript()函數。當我們編輯器中的腳本更改并且替換正在運行的腳本時，而且剛好此時它發覺到有一次更新時它就做這樣的檢查工作。它會清除我們上面的subScene調用，并根據我們的VR編輯器中的代碼立即更改有關元素。

七、 創建按鈕功能

為了能正確、身臨其境地體驗實時編碼（或其他任何你所創建的具備Primrose支持功能的應用程序），我們希望在全屏幕下展示。這是必不可少的VR要求，因為在任何其他方式下它都不會工作！為此，我們要添加按鈕來觸發這些模式。Primrose已提供了這其中的大部分直接支持。我們只需添加一個id為goVR的按鈕和另一個id為goRegular的按鈕，然后調用app.setFullScreenButton函數——把ID名稱作***個參數傳遞進去，還有一個click事件參數，***一個參數要么為true要么為false（用于指定VR常用的全屏模式）。請參考如下代碼：

 

八、 使用Primrose

目前，我們已經作了一定的準備工作，并了解了如何通過調整代碼實時地改變場景中的內容。但是，在Primrose程序中，我們能夠構建哪些內容呢？接下來，將介紹一些你經常加入的元素；你可以在app.js程序中通過testDemo()函數添加，或者在你的實時VR場景中添加。

(一) 使用軸（Axis）

軸的作用是提供紅、綠、藍共三個條塊，分別用于負責指示x軸、y軸和z軸三個方向。其調用方式是axis(length, width)，請參考如下代碼：

 

這段代碼調用將生成如下圖所示的效果：

 

 

(二) 使用點云（Point Cloud）

可以通過調用函數cloud(verts, color, size)來通過使用許多小方點生成點云。注意，其中的變量verts是一個頂點數組。使用點云的一個例子如下所示：

 

在上面的代碼中，MIDX，MIDY和MIDZ是在我們的示例代碼中已經定義好的變量。這段代碼指定了我們場景中的一個焦點。你可以把任意值賦給這些變量。

上面的代碼將在我們的場景中生成如下圖所示的效果：

 

(三) 使用Hub

在我上面提供的示例中你需要注意的一點是我們添加了一個叫start的東西。實際上，這是一個hub()函數——在我們的場景中是一個特別的入口點——我們可以在其中把其他對象分組。我們的hub()函數使用如下代碼定義：

 

(四) 添加燈光效果

可以通過調用函數light(color, [intensity, [distance, [decay]]])來創建燈光效果。我們的場景中的默認的燈光是白光的，如下面代碼所示：

 

(五) 添加一個長方體

本小節中將要添加的長方體以及接下來將添加的其他對象在我們的場景中呈現前都要求使用紋理。這些內容包含在一個叫textured()的函數內；此函數中通過指定圖像文件名來指定紋理數據。創建長方體的函數調用格式類似于：box(width, height, length)。請參考如下代碼：

 

通過上面的函數調用將會在我們的場景中創建一個Three.js中的BoxGeometry對象（http://threejs.org/docs/#Reference/Extras.Geometries/BoxGeometry）。

 

(六) 添加圓柱體

我們可以通過如下調用在場景中添加圓柱體：

 

通過上面的函數調用將會創建一個Three.js中的CylinderGeometry對象（http://threejs.org/docs/#Reference/Extras.Geometries/CylinderGeometry）。例如，下面創建的圓柱體，其頂部與底部的半徑均為1，高度為5，半徑/高度片斷數（segments）為40：

 

上面創建的圓柱體在場景中看起來將有如下圖所示的效果：

 

(七) 其他

其實，在Primrose文檔的“Scripting Functions”這一部分中你會發現大量的其他內容，包括quad()函數、shell()函數和sphere()函數，等等。請各位盡情地探討和試驗吧！

九、 小結

Primrose是一個功能非常強大的WebVR框架，不久后肯定會在構建Web虛擬現實應用方面發揮巨大作用。盡管WebVR技術及Primrose框架尚處于發展的早期，但是虛擬現實技術在Web領域的應用乃大勢所趨；因此，無論是Primrose還是WebVR一段時間后必將強大與成熟起來。

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】