14 Babylonjs基础入门 环境搭建

时间：2024-04-05 21:56:55

现在，我们已经学了很多的东西，了解了光，精灵，粒子，材质。但是场景中还缺少一样东西：合适的环境。接下来，我们将从简单的场景颜色（clearColor）开始，再到设置场景的天空盒子，然后使用雾来实现场景效果。
14 Babylonjs基础入门 环境搭建
一张照片显示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);

相关文章