材质允许你用颜色和纹理覆盖你的网格,它们需要光线才能被看到,一种材质可以覆盖任意多的网格。
- Reaction to light 材料对光线的反应
无论材料是一种颜色还是一种纹理,它对光线的反应都是不同的,主要有以下四种形式:
- diffuse 漫反射-在光线下看到的材料的基本颜色或纹理;
- specular 高光-灯光给予材料的高光
- emissive 发射的-材料的颜色或纹理,就像自发光;
- 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;