4 Babylonjs基础入门 材质

我们可以将设置颜色和纹理材质应用到网格上面，并且需要有光源才能显示出来。一种材质可以用于任意数量的模型网格。

对光的反应

通过不同的方法设置材质的颜色和纹理，会出现不同的反应。

1. Diffuse - 漫反射 - 在光下面观察到的材质的基本颜色或者纹理
2. Specular - 高光 - 光线给材质的高亮点
3. Emissive - 自发光 - 材质的颜色和纹理，自身的亮光
4. Ambient - 环境 - 由环境背景照明点亮的材质的颜色或纹理

注意：
漫反射和高光的设置需要场景内有光源才可显示出效果。
设置环境颜色或者环境纹理时，我们需要首先给场景设置环境颜色。

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;

环境色案例

所有的球体都被相同的光线照射，红色的光照以及以及绿色的地面反射光。第一个球体没有环境色，中间的球体使用了红色环境色的材质，右边的使用材质使用绿色环境色材质。场景的环境色必须要定义，当前定义的为白色。如果场景环境色的值都设置为0（或者设置成红色时），无论材质中的环境色的红色值如何都不会起作用。
案例代码：

scene.ambientColor = new BABYLON.Color3(1, 1, 1); //设置环境色为白色
	
	//创建一个平行光放到左上方
	var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene); //
	light.diffuse = new BABYLON.Color3(1, 0, 0); //添加灯光普通光照颜色红色
	light.specular = new BABYLON.Color3(0, 1, 0); //创建高光颜色为绿色
	light.groundColor = new BABYLON.Color3(0, 1, 0); //创建底部照射光为绿色
	
    //创建第一个材质
	var redMat = new BABYLON.StandardMaterial("redMat", scene);
	redMat.ambientColor = new BABYLON.Color3(1, 0, 0); //设置环境色为红色
	
    //创建第二个材质
	var greenMat = new BABYLON.StandardMaterial("redMat", scene);
	greenMat.ambientColor = new BABYLON.Color3(0, 1, 0); //设置环境色为绿色
	
	//创建一个没有环境色的材质的球
	var sphere0 = BABYLON.MeshBuilder.CreateSphere("sphere0", {}, scene);
	sphere0.position.x = -1.5;	
	
	//添加红色环境色材质的球
	var sphere1 = BABYLON.MeshBuilder.CreateSphere("sphere1", {}, scene);
	sphere1.material = redMat;
	
	//添加了绿色环境色材质的球
	var sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere2", {}, scene);
	sphere2.material = greenMat;
	sphere2.position.x = 1.5;				

最后显示的效果为，图下

设置透明材质

我们可以通过设置材质的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("图片路径", scene);
myMaterial.specularTexture = new BABYLON.Texture("图片路径", scene);
myMaterial.emissiveTexture = new BABYLON.Texture("图片路径", scene);
myMaterial.ambientTexture = new BABYLON.Texture("图片路径", scene);

mesh.material = myMaterial;

注意：如果模型没有设置法线，Babylon将自动计算法线。

设置透明纹理

对于颜色材质，我们知道是通过设置alpha属性的值来设置透明度。
如果图片是有透明度的纹理，比如使用了一张具有透明区域的png的图片。如果我们只是想让它透明的区域显示透明，这种情况下，我们需要将纹理的hasAlpha属性设置为true。

myMaterial.diffuseTexture.hasAlpha = true;

背景剔除

在正常渲染时，通常不会绘制物体的背面，因为它在正常情况下会被证明遮挡。但是如果当使用的是透明纹理时，并且将图片透明，我们将能够透明场景的证明查看到背面，但是背面是默认剔除掉了，所以我们无法查看到。
如果我们需要查看到背部，需要将backFaceCulling属性设置为false，即禁止掉背景剔除。

myMaterial.backFaceCulling = false;

显示线框

我们可以通过设置材质的wireframe属性来查看当前模型网格的线框。

materialSphere1.wireframe = true;