BabylonJS娛樂場!

一個用於保存”定製的”BabylonJS場景的網站: http://babylonjs-playground.azurewebsites.net/#QKQHS

它是什麼?

該BabylonJS 娛樂場是一個在線的白板式,可試驗的應用程序. 用於輔助創建基於Javascript的網頁圖形庫框架BabylonJS的場景. 爲了試驗該娛樂場你的瀏覽器必須支持WebGL-而且激活Javascript. 大多數的現在瀏覽器都支持.

簡單的說, 你可以在BabylonJS遊樂場的左邊編輯器輸入或修改基於Javascript的場景代碼, 按下運行按鈕, 然後娛樂場將嘗試在頁面的右邊區域裏使用最新的BabylonJS框架版本渲染WebGL場景.

頂部菜單

娛樂場的頂部菜單當前包含8個按鈕:

運行 - 運行按鈕很容易理解. 在你往編輯器裏粘貼代碼後, 或在你修改編輯器裏的代碼後, 按下運行. 這個命令娛樂場渲染你的場景.

保存 - 保存按鈕將使你的場景永久的保存到娛樂場的數據庫裏, 然後產生一個唯一的網址, 我們下面會更多的談論它. 別擔心意外覆蓋娛樂場裏任何預裝的場景. 那個不會發生的. 通常, 保存按鈕用在你要和其他人分享你的場景時, 或者用在你要將場景作爲書籤保存到瀏覽器裏時, 這樣你可以回來繼續工作.

獲取.zip壓縮包 - 獲取.zip壓縮包按鈕是娛樂場提供的一個方便特徵. 如果你想把你的場景帶回家, 或發佈到某個網站服務器上, 或者發送給其他人, 這個按鈕就是爲你提供的. 獲取.zip壓縮包 嘗試將你編輯器裏的代碼放入一個單一的index.html文件, 然後把之打包進一個叫做sample.zip的壓縮文件裏. 最後把這個sample.zip文件提供給你下載. 一旦你下載並解壓, 你就會看到名爲index.html的文件. 你能用一個支持WebGL的瀏覽器打開該文件, 你會發現場景被瀏覽器渲染得妥妥的在那. 當確定index.html文件工作正常後, 你也許想將之發佈到某個網頁服務器上, 然後同全世界分享你漂亮的娛樂場場景. 沒有必要安裝諸如babylon.js和hand.js的框架文件到index.html文件的附近目錄, 因爲index.html文件裏引用了和在線娛樂場框架使用的一樣版本. index.html文件已經可以運行並且完全可移植. (我們愛死它了!)

新建 - 新建按鈕是個獨特且方便的特徵. 如果你仔細查看過上面圖片裏編輯器中的代碼, 或者如果你在娛樂場場景的下拉選擇器裏選過某個預裝的場景, 你應該會注意到’包裹’在一個叫做’createScene()’函數裏的部分. 該createScene()函數是個在許多BabylonJS場景裏都會被使用的非常普通的函數. BabylonJS框架用戶經常複製和粘貼createScene()的內容. 通過按下這個按鈕, 你將清空編輯器裏的內容, 然後一個已經編寫好基礎內容的createScene()函數會出現在編輯器裏. 已提供一個默認的相機, 但是你也許想加些光源和網格, 以便新的場景可以被渲染.

清除 - 清除Clear按鈕也很容易理解. 這個按鈕簡單的清空娛樂場編輯器裏的所有代碼. 它經常用在已經準備好代碼而要直接往裏粘貼createScene()函數代碼時, 或者用在當你準備做些試驗的代碼嘗試時. BabylonJS娛樂場是使用BabylonJS框架來創建試驗代碼的非常棒的地方. 它是個美妙的學習方法.

字體大小 - 字體大小按鈕幾乎不需要解釋. 該按鈕和它提供的下拉選擇器允許你修改娛樂場編輯器裏代碼的字體大小.

場景選擇器 - 這個下拉選擇器按鈕 (上圖裏顯示爲’定製’)…是用來從預裝的娛樂場演示場景裏自由選擇場景的. ‘定製’並不是任何一個演示場景的名稱. 它被稱爲’定製’是因爲那個圖片中編輯器裏的場景是一個’定製’的場景. 它是個修改了些基礎場景的演示(爲上圖而創建的). 通常, 當你第一次打開娛樂場站點時, 那個按鈕會被標爲’基礎場景’. 無論那個按鈕上標註的是什麼, 它都被叫做場景選擇器 按鈕.

全屏 - 全屏按鈕也只需非常少的解釋. 這個按鈕會使右邊的渲染畫布進入全屏模式. 在進入全屏模式時, 你的瀏覽器會提供指令來退出全屏模式或返回到娛樂場的默認分屏模式.

編輯器

娛樂場左邊的代碼編輯器是個基於Ace 編輯器的一個’智能’編輯器. 娛樂場編輯器有許多奇妙的特徵. 它具有輸入預判的特徵, 比如自動補全匹配的引號, 小括號, 大括號, 和方括號… 這對編程編輯器是非常方便的. 它嘗試標出編程錯誤點, 而且當它發現潛在的語法問題時會在編輯器左邊放置小圖標. 如果你把鼠標指針指向那些小圖標,編輯器會彈出一個小窗口告訴你它發現了什麼問題. 編輯器也有語法加亮,代碼摺疊,文本拖拽,自動縮進及擴充等功能, 而且有4百萬行的容量. 講述編輯器的大量特徵超越了本教程的範圍. 通過訪問Ace編輯器的網站你能夠學習到更多的Ace編輯器知識，而且通過花更多時間在使用娛樂場編輯器上也可以.

弄糟了咋辦 - 任何編輯器的重要特徵之一是撤銷和重做, 我們的娛樂場編輯器完全支持這兩個特徵. 我並不熟悉所有操作系統裏的撤銷和重做操作鍵，, 但知道Windows系統裏撤銷鍵是Conntrol-z 而且重做鍵是 Shift-Control-z. 你也可以多次地執行撤銷和重做。這個非常方便，我們再次愛死它了。

渲染畫布

對於BabylonJS的網頁圖形庫渲染畫布你怎麼評價, 沒有比這個說法更牛逼了:”它是這個星球上最酷的事情!”. 娛樂場的右邊部分是BabylonJS網頁圖形庫框架用來渲染場景的區域，而且你可以通過左邊的編輯器實時控制場景. 渲染出來的畫布還是空白麼? 你點擊了運行按鈕麼? 你有創建相機麼? 相機的目標設置正確麼? 你網格的材質設置好了光源或散射顏色麼？

如果你的代碼已經包含在createScene()函數裏, 那在該函數的頂部有這行代碼麼var scene = new BABYLON.Scene(engine),? 函數尾部的大括號裏最後一行是否有return scene;呢? 你是否有創建一個網格對象，諸如：盒子, 圓柱體, 地面, 球體, 平面, 圓環體, 圓環節等?

你是在自由模式下運行而且沒把你的代碼放到createScene() 函數中麼? 那樣當然也是允許的，只是你仍然需要一個相機，一個光源和一個網格造型。. 缺乏這些會導致你的場景渲染失敗. 好好研究下娛樂場場景選擇器裏下拉演示場景, 你很快會成爲一名BabylonJS娛樂場專家的。

編譯錯誤

這是張娛樂場彈出的編譯錯誤檢測面板的圖片。編譯錯誤是當你點擊運行按鈕後BabylonJS框架檢測出來的錯誤. 它不是編輯器檢測到的語法錯誤, 但是編輯器也可能檢測到它並使用紅色X圖標在其左側將問題標示出來。編輯錯誤裏並不總能包含錯誤的關鍵點，但它仍然很方便. 它告知你BabylonJS框架已經對你場景代碼有些不爽拉。你調整代碼後在點擊運行按鈕前也許希望關閉彈出的編譯錯誤提示(通過它邊上的X按鈕).

娛樂場網址的格式

當你首次訪問BabylonJS娛樂場網站時, 你瀏覽器地址欄裏的網址看起來會像這樣:

http://www.babylonjs.com/playground/

如果你從下拉的場景選擇器裏選一個場景後, 娛樂場的網址會變成這樣:

http://www.babylonjs.com/playground/#

(可以自行編輯演示場景的代碼然後點擊運行或保存. 你不可能毀壞預裝的演示程序的)

當你想同人分享網址或爲以後的工作記住場景而將一個場景保存到娛樂場數據庫裏時，那麼網址看起來會像這樣的:

http://www.babylonjs.com/playground/#QKQHS

(記得用瀏覽器的書籤保存好)

如果你再次保存場景… (也許是在對場景做了更多工作之後), 那個網址將增長, 看着像這樣子的:

http://www.babylonjs.com/playground/#QKQHS#1

如果再次保存… 網址還增長, 看起來像這樣:

http://www.babylonjs.com/playground/#QKQHS#2

(再一次提醒, 務必用書籤保存這個網址，以便之後你能很容易的把它找回來)

而且最後, 如果你想加載一個特殊的預裝演示場景, 比如第12個演示場景, 你可以這樣訪問網址:

http://www.babylonjs.com/playground/?12

保持焦點

有時候你運行一個場景，然後在渲染畫布裏使用光標鍵和鼠標, 最後想將焦點返回到編輯器裏以便做更多的代碼修改. 有時候, 你要在編輯器裏其它區域點擊鼠標以便重新設定編輯器焦點. 一旦編輯器有了新焦點, 你的編輯器光標鍵就會再次移動. 這個常在場景裏有激活的自由相機時發生。.

最後… 甩個包袱

嘿，謝謝閱讀本教程，一併謝謝探究了BabylonJS娛樂場. 我們爲之自豪, 也認爲你會喜歡它. 這個教程還非常的新，而且將會經常的改變. 記得回來檢查更新，學習新特徵哦.