材料允许您在颜色和纹理上覆盖网格,并且需要光线才能看到。一种材料可用于覆盖任意数量的网格。
无论材料是颜色还是纹理,它都有不同的反应方式。
漫反射和镜面反射材质需要创建 光源。 环境颜色需要设置场景的环境颜色,从而提供环境背景照明。
scene.ambientColor = new BABYLON.Color3(1, 1, 1);
使用创建材料
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;
为了了解材料漫反射颜色如何对漫反射光颜色作出反应,下面的游乐场示例显示了不同的颜色材料如何对白色,红色,绿色和蓝色漫射光反应。
这种反应
黄色材料 | 紫色材料 |
青色材料 | 白色材料 |
在下图中还可以看到白色,红色,绿色和蓝色漫反射光。
在这个
游乐场的例子
-
通过将材质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的标准材料将计算法线。
在这个游乐场的例子 -
对于颜色,透明度是通过将材质alpha属性从0(不可见)设置为1(不透明)来实现的。
myMaterial.alpha = 0.5;
此外,用于纹理的图像可能已经具有透明度设置,例如来自维基媒体公域的狗的图片,其具有透明背景;
在这种情况下,我们将纹理的hasAlpha属性设置为true
myMaterial.diffuseTexture.hasAlpha = true;
为了通过正面的透明区域可以看到立方体的背面,我们必须处理背面剔除。
这是用于有效地绘制3D模型的2D屏幕渲染的方法。通常不需要绘制立方体或其他物体的背面,因为它将被正面隐藏。在BabylonJS中,默认设置是,如您所料,设置为true。
查看下面的图像,当材料属性backFaceCulling为true时,您可以看到狗周围的透明区域仍然是透明的,您可以通过它们看到背景。但是,您无法看到背面上的图像,因为它们已被剔除(或移除)。当backFaceCulling为false时,在渲染过程中不会移除背面,因此可以通过正面的透明区域看到它们。
背面剔除真实 | 背面剔除错误 |
---|---|
![]() |
![]() |
您可以使用以下方法在线框模式下查看网格:
materialSphere1.wireframe = true;
太棒了,你的场景比以往任何时候都更好看!稍后我们将看到如何使用材料的高级技术。但就目前而言,我们必须学习如何使用相机。