babylon101

物料


物料

材料允许您在颜色和纹理上覆盖网格,并且需要光线才能看到。一种材料可用于覆盖任意数量的网格。

对光的反应

无论材料是颜色还是纹理,它都有不同的反应方式。

  1. 漫反射 - 在光线下观察的材料的基本颜色或纹理;
  2. 高光 - 光线给材料的亮点;
  3. 自发光 - 材料的颜色或纹理,就像自亮一样;
  4. 环境 - 由环境背景照明点亮的材料的颜色或纹理。

漫反射和镜面反射材质需要创建 光源。 环境颜色需要设置场景的环境颜色,从而提供环境背景照明。

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

  1. 透明度 - 可以设置您可以通过材质看到的级别,对于具有透明部分的图像,可以使用它以使材料的适当部分不可见。这需要设置alpha属性。

颜色

使用创建材料

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

使用diffuseColor,specularColor,emissiveColor和ambientColor中的一个,部分或全部设置材质颜色。请记住,ambientColor 仅在已设置场景环境颜色时才适用。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

mesh.material = myMaterial;

漫反射颜色示例

为了了解材料漫反射颜色如何对漫反射光颜色作出反应,下面的游乐场示例显示了不同的颜色材料如何对白色,红色,绿色和蓝色漫射光反应。

这种反应

黄色材料 紫色材料
青色材料 白色材料

在下图中还可以看到白色,红色,绿色和蓝色漫反射光。

 Spot Light

环境颜色示例

在这个 游乐场的例子 -


所有球体都被相同的半球光照亮,漫射的红色和地面颜色为绿色。第一个球体没有环境颜色,中间部分在其材料上定义了红色环境颜色,而右边一个球体具有绿色环境颜色的材料。必须存在的场景环境颜色是白色。当场景环境颜色分量设置为0(例如红色)时,无论材质环境颜色中的红色值如何都不起作用。

Ambient

透明颜色示例

通过将材质alpha属性从0(不可见)设置为1(不透明)来实现透明度。

myMaterial.alpha = 0.5;

质地

使用保存的图像形成纹理。

使用创建材料

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

使用diffuseTexture,specularTexture,emissiveTexture和ambientTexture中的一个,部分或全部设置材质。请注意,应用ambientTexture时未设置场景环境颜色。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

myMaterial.diffuseTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.specularTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("PATH TO IMAGE", scene);
myMaterial.ambientTexture = new BABYLON.Texture("PATH TO IMAGE", scene);

mesh.material = myMaterial;

注意:如果未指定法线,Babylon的标准材料将计算法线。

纹理示例

在这个游乐场的例子 -


所有球体都被相同的半球光照亮,漫射的红色和地面颜色为绿色。第一个球体具有漫反射纹理,中间是发光纹理,右侧是具有红色漫反射颜色和环境纹理的材质。

Texture

透明纹理示例

对于颜色,透明度是通过将材质alpha属性从0(不可见)设置为1(不透明)来实现的。

myMaterial.alpha = 0.5;

此外,用于纹理的图像可能已经具有透明度设置,例如来自维基媒体公域的狗的图片,其具有透明背景;

A dog

在这种情况下,我们将纹理的hasAlpha属性设置为true

myMaterial.diffuseTexture.hasAlpha = true;

为了通过正面的透明区域可以看到立方体的背面,我们必须处理背面剔除。

背面剔除

这是用于有效地绘制3D模型的2D屏幕渲染的方法。通常不需要绘制立方体或其他物体的背面,因为它将被正面隐藏。在BabylonJS中,默认设置是,如您所料,设置为true。

查看下面的图像,当材料属性backFaceCulling为true时,您可以看到狗周围的透明区域仍然是透明的,您可以通过它们看到背景。但是,您无法看到背面上的图像,因为它们已被剔除(或移除)。当backFaceCulling为false时,在渲染过程中不会移除背面,因此可以通过正面的透明区域看到它们。

背面剔除真实 背面剔除错误
BFC True BFC False

线框

您可以使用以下方法在线框模式下查看网格:

materialSphere1.wireframe = true;

wireframe

下一步

太棒了,你的场景比以往任何时候都更好看!稍后我们将看到如何使用材料的高级技术。但就目前而言,我们必须学习如何使用相机。

进一步阅读

材料概述