現在，我們已經學了很多的東西，了解了光，精靈，粒子，材質。但是場景中還缺少一樣東西：合適的環境。接下來，我們將從簡單的場景顏色（clearColor）開始，再到設置場景的天空盒子，然后使用霧來實現場景效果。

一張照片顯示Babylon.js場景中移動的霧

我們將如何實現這些功能？

首先，我們先了解場景類上的兩個有趣的屬性：

• scene.clearColor - 更改“背景”顏色。
• scene.ambientColor - 更改多種效果中使用的顏色，包括環境照明。

它們都非常有用，并且本身就很強大。

更改背景顏色（scene.clearColor）

場景對象上的clearColor屬性是最基本的環境屬性/調整。簡單地說，這就是你改變場景背景顏色的方法。以下是它的使用方式：

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);

或者你希望使用我們的預設顏色并避免使用new聲明：

scene.clearColor = BABYLON.Color3.Blue();

此顏色和屬性不用于網格，材質，紋理或其他任何顏色的最終顏色的任何計算中。它只是場景簡單的背景顏色。

改變環境顏色（scene.ambientColor）

相反，ambientColor場景對象上的屬性是一個非常強大且有影響力的環境屬性/調整。首先，我們來看看它的語法：

scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);

除了屬性名，它和背景色的修改方式一樣，但是ambientColor在很多計算中用于確定場景內對象的最終顏色。主要是，它和網格材質StandardMaterial.ambientColor結合來確定材質最終的效果。
你會發現，當沒有設置scene.ambientColor，設置了StandardMaterial.ambientColor和StandardMaterial.ambientTexture也不會出現聲明效果。如果想讓模型上面的環境屬性生效，必須要設置場景的環境顏色。
默認情況下，scene.ambientColor設置為Color3(0, 0, 0)，表示沒有使用scene.ambientColor。
（有關詳細信息，請參閱Unleash the Standard Material 教程中有關ambientColors的部分。）

天空盒

為了給人一種美麗晴朗天空的完美幻覺，我們將創造一個簡單的盒子，來實現當前的效果。首先我們使用普通盒子實現，來了解天空盒是如何實現的：

手動創建

首先，創建一個盒子，只需要注意關閉背面剔除即可：

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial;

接下來，我們設置infiniteDistance屬性。這樣天空盒為跟隨我們的相機位置移動。

skybox.infiniteDistance = true;

現在，我們刪除盒子上的反射光（天空不會反射太陽）：

skyboxMaterial.disableLighting = true;

接下來，我們將特殊的天空盒紋理應用于它。這個紋理必須提前準備好，我嗎的粒子中天空紋理的文件夾名稱為’skybox’：

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

（關于reflectionTextures的更多信息可以在我們的Unleash the Standard Material教程中找到。）
在那個/skybox目錄中，我們會找到6個天空紋理，一個用于我們盒子的每個面。必須根據相應的面來命名每個圖像：“skybox_nx.png”，“skybox_ny.png”，“skybox_nz.png”，“skybox_px.png”，“skybox_py.png”，“skybox_pz.png”。
如果你想要一些免費的天空盒紋理資源，請打開地址：https://3delyvisions.co/skf1.htm（官網給的就這個，雖然打開沒有）。天空盒子不一定內容必須是天空。還可以是建筑物，丘陵，山脈，樹木，胡泊，行星，恒星。
你還可以使用dds文件來設置天空盒。這些特殊文件包含了立方體紋理所需的所有信息：

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);

最后請注意，如果您希望天空盒在其他所有內容后面渲染，請將天空盒設置renderingGroupId為0，并將所有其他可渲染對象設置為renderingGroupId大于零，例如：

skybox.renderingGroupId = 0;// 其它對象設置大于0 myMesh.renderingGroupId = 1;

有關渲染組和渲染順序的更多信息，請參見此處。

自動創建

我們了解了如何手動實現，接下來看一下更簡單的方式實現：

var envTexture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene); scene.createDefaultSkybox(envTexture, true, 1000);

• 官方案例天空盒子

查看場景助手介紹，了解相關內容和其它助手的更多信息。

霧

霧是一種想當高級的效果，在Babylon.js中已經將霧最大程度的簡化。現在很容易在場景中添加霧的效果。
首先，我們要定義霧的模式：

scene.fogMode = BABYLON.Scene.FOGMODE_EXP;

當前可設置的選項為：

• BABYLON.Scene.FOGMODE_NONE - 默認值，停用霧。
• BABYLON.Scene.FOGMODE_EXP - 霧密度遵循指數函數。
• BABYLON.Scene.FOGMODE_EXP2 - 與上述相同但更快。
• BABYLON.Scene.FOGMODE_LINEAR - 霧密度遵循線性函數。

如果選擇EXP，或EXP2模式，則可以定義密度選項（默認為0.1）：

scene.fogDensity = 0.01;

否則，如果選擇LINEAR模式，則可以定義霧開始的位置和霧結束的位置：

scene.fogStart = 20.0; scene.fogEnd = 60.0;

最后，你還需要制定霧的顏色（默認為BABYLON.Color3(0.2, 0.2, 0.3)）：

scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

總結

以上是生活随笔為你收集整理的14 Babylonjs基础入门 环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。