BabylonJS入門之詳解工作流三

再做一個新的場景

目錄

1. 添加Skybox
2. 把你的工作存起來吧
3. 載入一個3D模型
4. 驗證迄今為止的工作。

為了使大型項目中的場景管理模式更加清晰，製作第二個場景也是有意義的，我們還可以介紹一些簡單的編輯器功能。

這次我們將從一個全新的場景開始。

選擇 'Yes'

編輯器現在處於完全空白狀態，如下所示：

讓我們加些東西。由於我們處於完全的「空白狀態」，所以覆蓋地面和天空可能是有用的，因為許多場景都使用這一點。

添加Skybox

如果事先查看默認場景，您可能會注意到skybox是一種特殊的材質，使用的文件擴展名為.dds。材質類型基於基於物理的渲染（PBR），這是BabylonJS非常酷和強大的特性。整個範圍不在本編輯器和工作流教程的範圍內，但是您也可以在此處看到底層材料PBR材料類型的演示。

https://www.babylonjs.com/demos/pbrglossy/

你看到頭盔上所有的反射和材料，以及增加的真實感嗎？這就是PBR的力量。除了那個花哨的頭盔網，基於物理的建模對Skybox來說是很棒的。

我不會詳細介紹如何生成這個文件，但是簡短的版本是，你需要一個skybox，然後你需要一種方法將這個skybox轉換成.dds格式以供BabylonJs使用。互聯網上有很多Skybox，我在本教程中使用的一個很好的工具是Alex Peterson的Spacescape軟體。它基本上是一個非常酷（而且免費）的軟體，專門用來製作以太空為主題的天空盒。

你可以在這裡下載：http://alexcpeterson.com/spacescape/

如果你想自己嘗試，或只是自己做一個天空盒。Spacescape直接導出為.dds格式，因此非常適合測試此工作流。您需要選擇此特定工具的模式是：

選擇一個名字

1. 單個DDs多維數據集映射（*.DDs）
2. 512是非常好的演示，1024看起來更好！為了更好的性能，用512就可以了。
3. 選擇source。

我的建議是：避免使用高解析度的紋理輸出。原始的skybox是一個大文件，我們只是介紹工作流程。優化此資源（例如轉換為.env文件）超出了本教程的範圍。

現在我們需要把它啟動並運行。在新場景中，拖動文件（我的是空間.dds)進入「紋理查看器」選項卡。當它出現在列表中時，您需要將紋理「Coordinates Mode」更改為SKYBOX_MODE

現在您將在編輯器中看到您的天空盒投影到球體上。它應該是無縫的。

現在我們要把這個紋理放到一個材質上。我們將轉到「Materials Viewer」（材質查看器）並單擊+ADD(添加)。。。位於選項卡名稱下的按鈕。

執行此操作時，將彈出一個窗口，並確保選擇PBRMaterial。

當你有了材質，改變一些屬性。單擊新材質，此時將打開「Inspector」(檢查器)窗口。

• 將材質重命名為SpaceBox

• 我們需要關閉背面剔除。

去點選中的鉤，這樣，可以使材料在立方體內部可見。

• 指定實際紋理！

只需在inspector的Reflection菜單的Reflection Texture屬性中添加的.dds文件。

現在，就像使用紋理查看器一樣，您應該可以在材質查看器中看到顯示正確紋理的球體。

祝賀你。這基本上就是在編輯器中製作材質的過程。

1. 導入紋理
2. 添加材質
3. 同時配置兩者；尤其是為材質指定正確的紋理。

我們的天盒子幾乎做完了。我們需要在場景中添加一個新的立方體。在頂部菜單中單擊+添加，當彈出菜單出現時，選擇「Cube Mesh」(立方體網格)。

此時，您應該會在場景中看到一個小的灰色立方體，並在「Materials Viewer(材質查看器)」中看到兩個材質。名為default material的材質被添加到立方體旁邊。

下一步，我們需要把這個立方體做得更大以容納場景。在cube的「inspector」窗口中，查看「Properties 屬性」選項卡。在裡面你想把縮放比例改成大的，比如500x500x500。

在這一點上，你將有一個大的灰色立方體圍繞著你。我們需要採取一些額外的措施讓它看起來像一個空盒子。在「Graph」選項卡或「Preview」選項卡中選擇cube box。現在在它的inspector中：

1. 為它一個合理的名字。我把我的名字命名為:SkyboxSpacescape
2. 將SpaceBox材質指定給立方體。

現在你應該看到你周圍的天空之盒！運行遊戲預覽標籤，看看！看起來不錯！

把你的工作存起來吧

我們有一個只有一個skybox的簡單場景，現在是保存這個場景的好時機。和以前一樣，將它保存到自己的文件夾中，editorprojects的文件夾下，命名為：Space-Scene。到目前為止，您的整個項目目錄結構（可能）如下所示：

當您添加更多的項目時，它們會像這樣在編輯器項目目錄中歸檔。您只需雙擊scene.editorprojet 這裡的圖標就可以在場景之間來回切換。

特別注意：每次保存，建議使用「Save Project As...」另存為,如果覆蓋掉以前的成果，哭都來不及。

載入一個3D模型

因為我們的第二個場景實際上只是一個skybox，所以我認為在我們開始進入與在您計劃發布的web項目上下文中管理場景相關的工作流之前，在場景中再添加一個3D模型可能是個好主意。

在Babylon官網已經提供了一些非常好的3d模型，下載下來，就可以進行實驗。由於本教程更多的是關於工作流，而不是關於製作您自己的3d模型，因此我們可以隨便下載個別人做好的3d模型來學習。

Babylon支持的3D模型常見的格式，如gltf,obj,stl.等等，想要了解詳細的，請參閱：

https://doc.babylonjs.com/how_to/load_from_any_file_type

官模型示例：https://doc.babylonjs.com/resources/meshes_to_load （可以下載模型，及程序源碼）

此外，如果您會建模軟體，如Blender、3ds Max、Cheetah 3d等等，那麼可能有一個導出器可以讓您輕鬆地創建網格。在BabylonJS文檔的參考資料部分有很多關於這個的文章。

為了順利能完成這個教程，我們提供了一個現成的3d模型下載：

Dude.babylon

• Mesh: https://www.babylonjs-playground.com/scenes/Dude/Dude.babylon
• Asset: https://www.babylonjs-playground.com/scenes/Dude/0.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/1.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/2.jpg
• Asset: https://www.babylonjs-playground.com/scenes/Dude/3.jpg

下載完如下：

困難的部分來了。下載文件和資源後。。將它們全部拖到編輯器中，然後在提示符上單擊yes。

我們來看看都發生了什麼：

• 在紋理查看器中有更多的紋理！

• 材質查看器有更多的材質

• 在Graph中，有一個新的節點，可能是個多餘的攝像機，如果你想，可以刪除它。看起來象這樣：

• 在Preview中，多了一個網格對象

點擊下play，試試看，別忘了保存你們工作。

我們很容易，就用網頁顯示了一個3D模型

驗證迄今為止的工作。

• 打開和關閉兩個項目
• 檢查你的文件夾結構，應該是這樣的