babylon101| 05. Material（材质）

材质允许你用颜色和纹理覆盖你的网格，它们需要光线才能被看到，一种材质可以覆盖任意多的网格。

• Reaction to light  材料对光线的反应

无论材料是一种颜色还是一种纹理，它对光线的反应都是不同的，主要有以下四种形式：

1. diffuse 漫反射-在光线下看到的材料的基本颜色或纹理;
2. specular 高光-灯光给予材料的高光
3. emissive 发射的-材料的颜色或纹理，就像自发光;
4. ambient 环境光-由环境背景光照明的材料的颜色或纹理。

漫反射和高光材质的显示需要创建一个光源

环境光颜色需要设置环境的颜色，通过

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

• Color 颜色

设置材料颜色的方法如下：

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;

diffuseColor 漫反射颜色的例子

为了展示材质漫反射颜色对灯光的反应，以下例子显示的是不同颜色的材质对不同颜色点光源的反应，小球代表所光源及其颜色，通过改变地面的漫反射颜色，观察不同的情况，地面颜色变化为 黄色、紫色、青色、白色，效果如下：

Ambient Color Example 环境颜色的例子

通过设置ambient color 可以实现物体的颜色随着与光源位置的变化而变化的效果

如图，设置了方向为左上角的红色光-地面绿色光通过设置球体的ambientcolor属性，可以实现颜色渐变的效果

transparent color 透明色

透明色的设置是通过改变alpha值来实现的

myMaterial.alpha = 0.5;

设置透明度之后的效果如上图所示

• Texture 纹理

纹理是使用保存的图像形成的，纹理的创建方法如下：

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;

实例： 所有的球体都是由相同的半球光照明，漫反射的红色和底色的绿色。第一个球有漫反射纹理，中间有发射纹理，右边的球有红色漫反射颜色和环境纹理。

ps：当用于纹理的图像已经有一个透明设置时，例如来自wikimedia commons的这张狗的图片，它有一个透明的背景，需要设置hasAlpha属性为true，为了使立方体的后表面通过前表面的透明区域可见，必须将后表面剔除。

myMaterial.diffuseTexture.hasAlpha = true;
mat.backFaceCulling = false;

• Back Face Culling

这是一种高效绘制三维模型在二维屏幕渲染的方法，通常不绘制立方体或其他对象的背面，因为它将被正面隐藏。babylonjs的默认设置为true，也就是不能看到背面的图像

• WireFrame

可以显示线框格式的网格

materialSphere1.wireframe = true;

参考资料： https://doc.babylonjs.com/babylon101/materials