材质创建和属性编辑

一月 16, 2024

1、创建材质

// 第一个参数是材质名称，第二个是场景实例

1	var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

**
**

2、设置材质颜色

1、使用漫反射颜色diffuseColor、镜面颜色specularColor、自发光颜色emissiveColor以及环境颜色ambientColor来设置材质颜色

2、当场景的环境颜色已设置时，环境颜色才能看到效果

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);//环境光颜色

3、物体添加材质

使用漫反射颜色diffuseColor、镜面颜色specularColor、自发光颜色emissiveColor以及环境颜色ambientColor来设置材质颜色

mesh.material = myMaterial;//mesh是之前创建的物体

漫反射颜色（不同颜色的灯光照射在不同漫反射颜色的地面）

当地面材质为白色的时候，灯光照射在地面都显示出了自身原有的颜色；

而且白色那一盏灯，会照射出地面材质的原本颜色。

白色是一个通透的颜色，就像透明一样，

而黑色则相反，它完全会遮挡住其他颜色，

至于其他中间色，则表现出了一些特殊的效果，大家可以慢慢观察。

环境色

半球光Hemispheric Light，设置红色漫反射diffuse和绿色底色groundColor（场景环境色白色）

第一个球体没有设置材质和其环境颜色

中间的球体设置了红色环境色的材质

右边的球体设置了绿色环境色的材质

纹理贴图

纹理必须配合材质来使用

1	var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

漫反射纹理diffuseTexture、镜面反射纹理specularTexture、自发光纹理emissiveTexture以及环境纹理ambientTexture来设置材质纹理贴图

var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);

// PATH TO IMAGE，表示图片的路径，其实也可以使用base64格式的图片。

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; //记得设置物体的材质属性

设置了一个半球光Hemispheric Light，并给它设置了红色漫反射diffuse和绿色底色groundColor，所有的球体都由这个半球光来照亮。第一个球体设置了漫反射纹理，中间的设置了自发光纹理，最右边了不仅设置了一个环境纹理，还给了一个红色的漫反射颜色

透明纹理

纹理必须配合材质来使用

1	myMaterial.alpha = 0.5;

用于创建纹理的图片本身可能已经有透明度了，将纹理的hasAlpha属性设置为true

1	myMaterial.diffuseTexture.hasAlpha = true;

背面消除

不绘制立方体或其他对象的背面，这是一种在二维屏幕上有效绘制三维模型的渲染方法

backFaceCulling属性设置为true时

线框WireFrame

如果要下图那样呈现物体，我们可以设置材质的线框WireFrame属性：

1 2	materialSphere1.wireframe = true;

纹理打包程序Texture Packer

纹理打包程序Texture Packer，

把来自于多个材质的纹理打包成为一系列图片，这个类似于css sprite雪碧图。

但需要权衡的是，每个纹理都将按比例缩放到固定的大小，并可能导致一些纹理图片的相互混淆，webGL的限制也可能会成为一个瓶颈。

打包程序将为纹理创建一系列的帧，这个纹理是所有材质所对应的纹理通道的集合，且是唯一的；

然后再为被打包材质对应的每个通道生成一张图片；最后，通过修改物体的目标UV＃，以使其与打包程序生成的纹理对应帧匹配，这个UV值是通过物体构造函数进行传递的。打包程序假定所有纹理都是一个正方形，即使不是，程序也会把这个纹理贴图放到正方形的框内。

1
2
3

let pack = new BABYLON.TexturePacker(name, targetMeshes, options, scene);

pack.processAsync().then(success).catch(error);

查看评论