Babylon.js 第21章 材质映射到网格+贴花

目录

 一、 表面网格

二、正面与背面的网格

三、对不同网格使用多材料

四、网格贴花

 贴花示例：

---

 

 一、 表面网格

    let col=6
    let row=4
    let faceUV=new Array(6)
    
    for(let i=0;i<6;i++){
        faceUV[i]=new BABYLON.Vector4(i/col,0,(i+1)/col,1/4)
    }
    /*
    *面上的图像反转
    faceUV[0]=new BABYLON.Vector4(0,0,1/2,1/4)
    let temp=faceUV[0].x
    faceUV[0].x=faceUV[0].z
    faceUV[0].z=temp
    let temp1=faceUV[0].y
    faceUV[0].y=faceUV[0].w
    faceUV[0].w=temp1
    */

    let faceColor=new Array(6)
    //应用颜色
    faceColor[0]=new BABYLON.Color4(1,1,0,0)
    faceColor[4]=new BABYLON.Color4(0,0,1,0)
    let box=BABYLON.MeshBuilder.CreateBox(
        'box',
        {width:10,height:5,depth:5,faceUV:faceUV,
        wrap:true,topBaseAt:0,faceColors:faceColor},
        scene
    )
    box.material=sphereMaterial
    sphere.material=sphereMaterial

必须使用MeshBuilder才能自定义面上的网格图像。当然faceUV的Vector4有四个参数（x,y,z,w）,其实际意思很简单，就是图像的比例，x，y，左下角开始的一个坐标，z,w，右上角的一个坐标，只是其取值是图像的比例，介于0到1之间。（0，0，0.5，1），意识就是截取图像左半部分的图像。依此类推。

option对象参数：

• wrap - 布尔值（默认 = false），当为 true 时，所有垂直边 (0, 1, 2, 3) 将在正确的垂直方向上应用图像纹理，两个水平边 (4, 5) 将应用图像纹理，以便当框围绕 x 轴旋转以使这些边垂直时，应用的图像纹理将以其原始方向应用；
• topBaseAt - 整数，0, 1, 2, 3，（默认 = 1），框顶部图像的底部（底部）紧挨着给定数字的一侧；
• bottomBaseAt- 整数，0, 1, 2, 3，（默认 = 0），框底部图像的底部（底）紧挨着给定数字的一侧。

faceColor也是对应面上应用颜色。

圆柱体的面：圆柱体具有三个表面，顶部、底部和连接它们的管子。对于面选项，面 0 是底部，面 1 是管，面 2 是顶部。

挤压多边形具有顶部、底部和挤压边三个表面，面 0 是顶部，面 1 是挤压边，面 2 是底部。

可以将纹理图集与所有多面体一起使用，但是如果不仔细考虑纹理图集的性质，结果可能看起来有点随机。 

二、正面与背面的网格