Babylon.js中的材质使用

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

babylonjs材质

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

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


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种颜色是:黄色、紫色、青色、白色,如下图:

Babylon材质的4种颜色

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

Babylon材质颜色


Babylonjs环境光颜色的例子

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

我们来看一下例子,代码

这个例子的效果图如下:

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个球黄色比较明显。

babylonjs漫反射

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

babylonjs镜面光

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


Babylonjs光总结

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

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