Babylon.js中的材质使用

材质就是物体的质感和触感，如不锈钢和布料的材质，质感和触感就是不一样的。在3D中，材质被赋到模型上。下面就是一些材质：

材质的体验和光照关系比较大，光滑的表面，光照下特别明亮耀眼，如玻璃表面。粗糙的表面会显得暗淡，如地面。这些都是受光照的影响。

我们经常说一个女孩皮肤好，其实说的就是她的质感很好，材质很好。对于物体来说，材质非常重要，如果没有材质，那么网格模型就会失去应有的活力。

babylonjs材质的分类

按照材质对光线的反射的情况，可以将材质分为如下几类：

• 漫反射材质（Diffuse）—— 在光线下观察的材料的基本颜色或质地；
• 镜面材质，也叫高光（Specular）—— 光线给材质的亮点；
• 发光材质（Emissive）—— 发光材料的颜色或质地，如自发光；
• 环境材质（Ambient）—— 由环境背景光照明的材料的颜色或质地。

漫反射和镜面材料需要光源，如果没有光源，就不会发生反射，没有反射，就没有光进入人眼，所以对人来说，看不出什么区别。

环境颜色需要设置场景的环境颜色，提供环境背景照明。场景有一个环境光颜色属性（ambientColor），下面的代码给环境光赋值为白色。

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

创建一个基本材质BABYLON.StandardMaterial

首先创建一个可使用的基本材质。可以用BABYLON.StandardMaterial这个函数，它的原型如下：

StandardMaterial(name: string, scene: Scene): StandardMaterial

• name: 材质的名字
• scene: 材质在哪个场景中起作用

下面是一个例子:

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;

最后一行代码，给mesh设置了一个材质，这样mesh就有材质了。

我们看一下完整的代码：来一份代码

漫反射颜色的例子

来一份代码

什么是漫反射呢？

代码中我们定义了4种材质颜色，分别在界面中用单选框来选择，这4种颜色是:黄色、紫色、青色、白色,如下图：

下列图中材质的基本颜色从左到右，从上到下，分别为黄色、紫色、青色、白色。分别对白色、红色、绿色和蓝色漫反射灯作出反应。注意视角如何调节灯光。

Babylonjs环境光颜色的例子

环境颜色是对场景中人物、物体生活环境照明的光线，例如为了营销阴天的效果，那么就应该用淡黑色作为环境颜色。为了营造日照的效果，那么就应该金黄色的光照。

我们来看一下例子，代码

这个例子的效果图如下：

上图中有3个球，代码中定义了一个球形光，如下：

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

光的位置在球的顶部靠左的地方，漫反射diffuse颜色为红色（1，0，0），所以，我们才看到前2个球有部分都为红色，第3个球，红色不明显，但是黄色明显，这是因为红色（1，0，0）和绿色（0，1，0）混合后变为黄色（1，1，0），所以第3个球黄色比较明显。

镜面光specular为绿色，所以，我们才看到前2个球，有一个小点为绿色，这就是镜面反射效果。

为什么第3个球，没有镜面效果，这是因为HemisphericLight的镜面光是绿色，第3个球本身的材质的环境光也是绿色，所以除了亮一点外，并不能形成镜面光。

Babylonjs光总结

关于光照其实比较难理解的，所以需要大家多练习，举例来说，就是大家去换一下光的颜色，感受一下物体的变化，这样慢慢的就理解光照的含义了。

非常感谢大家阅读，欢迎大家加我们的微信，QQ，见页面底部。

原文地址：https://www.hellodemos.com/hello-babylonjs/babylonjs-material.html