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.ambientColorStandardMaterial.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);