babylon101

环境


环境

你已经走了很长的路,了解了形状,灯光,精灵,颗粒,材料。但是你的场景中缺少一些东西:适当的环境。这是关于场景环境因素和效果的三个连续的How_To中的第一个。我们将从简单的场景clearColor(背景颜色)开始,然后简要介绍一下场景,然后谈谈ambientColor6个纹理的天空盒,然后使用雾来给你的场景带来深度幻觉。

Environment

显示Babylon.js雾的图片在行动

我怎样才能做到这一点?

W不久之后,我们将谈论好雾效应。首先,我想向您介绍场景类对象上的两个有趣属性:

  • 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);

如您所见,它使用相同的格式设置clearColor,但ambientColor在很多计算中用于确定场景项的最终颜色。主要是,它与网格结合使用StandardMaterial.ambientColor以确定ambientColor网格材质的FINAL 。

你会发现,当没有scene.ambientColor,那么StandardMaterial.ambientColor和StandardMaterial.ambientTexture会出现什么也不做。设置scene.ambientColor一些值,如上例所示,并且StandardMaterial.ambientColor/ StandardMaterial.ambientTexture将在您应用此类网格的网格上变为活动状态。

默认情况下,scene.ambientColor设置为Color3(0, 0, 0),表示没有scene.ambientColor。

(有关详细信息,请参阅“ 释放标准材料教程中有关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”。

Skybox纹理不一定是天空的纹理。您可以在互联网上搜索天空盒,找到建筑物,丘陵,山脉,树木,湖泊,行星,星星,您可以将它命名(所有都可以很好地使用)作为天空盒纹理的一部分,但有些需要付款。

您还可以使用dds文件指定天空盒。这些特殊文件可以包含设置立方体纹理所需的所有信息:

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

最后请注意,如果您希望天空盒在其他所有内容后面渲染,请将天空盒设置renderingGroupId为0,并将所有其他可渲染对象设置为renderingGroupId大于零,例如:

skybox.renderingGroupId = 0;

// Some other mesh
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 - 默认值为1,雾化已停用。
  • 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);

看,我们告诉你这很容易。

如果您想在本教程中查看和玩游乐场,您可以点击此处

下一步

你现在应该有一个美丽的场景,但除了你的3D模型,你的世界非常平坦,这对你的场景来说是一种耻辱。所以,在我们的下一个环境教程中,我们将把你的平地改造成美丽的山脉。要了解这一点,请转到 此处!

进一步阅读

环境概述

场景快速构建