材料对光的反应

Diffuse - 漫反射，材料在光源下缩展示的基本纹理或材质。
Specular - 镜面反射，材料的高光表现。
Emissive - 材料的自发光表现。
Ambient - 材料在环境光下的表现。其中1、2需要设置光源，4需要设置环境光。

材质类型

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;

材质透明度

myMaterial.alpha = 0.5;//所用材质无透明度设置
myMaterial.diffuseTexture.hasAlpha = true;//所用材质已有透明度设置

材质Tiling

myMaterial.diffuseTexture.uScale = 5.0;//在u(x)轴方向上同样长度内由五块原材质拼接
myMaterial.diffuseTexture.vScale = 5.0;//在v(y)轴方向上同样长度内由五块原材质拼接

材质offset

myMaterial.diffuseTexture.uOffset = 1.5;//材质u(x)轴方向上初始位置向正方向移动0.5倍长度
myMaterial.diffuseTexture.vOffset = 0.5;//材质v(y)轴方向上初始位置向正方向移动0.5倍长度

凹凸映射层

凹凸映射是补色渲染技术（Phong Shading Technique）的一项扩展，只是在补色渲染里，多边形表面上的法线将被改变，这个向量用来计算该点的亮度。当你加入了凹凸映射，法线向量会略微地改变，怎么改变则基于凹凸图。改变法线向量就会改变多边形的点的颜色值，从而实现视觉上的凹凸感。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.bumpTexture = new BABYLON.Texture("PATH TO NORMAL MAP", scene);

//凹凸反向
myMaterial.invertNormalMapX = true;
myMaterial.invertNormalMapY = true

透明度映射层

和直接设置alpha来设置材质的整体透明度不同，设置透明度映射层可以为材质的不同部分设置不同的透明度。

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
myMaterial.opacityTexture = new BABYLON.Texture("PATH TO OPACITY MAP", scene);

细节映射层

细节贴图可用于基础表面信息上覆盖第二组纹理。

//引入文件
myMaterial.detailMap.texture = new BABYLON.Texture("textures/detailmap.png", scene);
myMaterial.detailMap.isEnabled = true;

//设置参数
myMaterial.detailMap.diffuseBlendLevel = 0.1; 
myMaterial.detailMap.bumpLevel = 1; 
myMaterial.detailMap.roughnessBlendLevel = 0.25;

分面设置材质

//前后
var f = new BABYLON.Vector4(0.5,0, 1, 1); 
var b = new BABYLON.Vector4(0,0, 0.5, 1); 

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:1, width: 0.665, sideOrientation: BABYLON.Mesh.DOUBLESIDE, frontUVs: f, backUVs: b}, scene);

var mat = new BABYLON.StandardMaterial("", scene);
mat.diffuseTexture = new BABYLON.Texture("URL to Image File", scene);
plane.material = mat;

//多面
const faceUV = [];
faceUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1);
faceUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5);
faceUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5);

const carMat = new BABYLON.StandardMaterial("carMat");
carMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/car.png");

const car = BABYLON.MeshBuilder.ExtrudePolygon("car", {shape: outline, depth: 0.2, faceUV: faceUV, wrap: true});
car.material = carMat;

多材质

var multimat = new BABYLON.MultiMaterial("multi", scene);
multimat.subMaterials.push(material0);
multimat.subMaterials.push(material1);
multimat.subMaterials.push(material2);
//单物体多材质，效果为三种材质拼接
var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 3, scene);
sphere.material = multimat;

屏幕截图 2022-01-18 163031.png

//多物体组合分别设置材质
var mat1 = new BABYLON.StandardMaterial('mat1', scene);
mat1.diffuseColor = new BABYLON.Color3(1, 0, 0);
var mat2 = new BABYLON.StandardMaterial('mat2', scene);
mat2.diffuseColor = new BABYLON.Color3(0, 1, 0);

var multimat = new BABYLON.MultiMaterial('multi', scene);
//cube的材质设置为mat2
var mesh = BABYLON.Mesh.MergeMeshes([sphere, cube], true, true, undefined, true);
mesh.material = multimat;
mesh.subMeshes[1].materialIndex = 1;

babylonjs 基础材质设置