14 Babylonjs基础入门 环境搭建
现在,我们已经学了很多的东西,了解了光,精灵,粒子,材质。但是场景中还缺少一样东西:合适的环境。接下来,我们将从简单的场景颜色(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);