Babylongjs-材质的面

每个房子边的材料

在方块的属性中，一个是faceUV和Vector4s数组。我们可以使用它来获取图像区域的一部分以应用于框的一个面。

在faceUV阵列中，背面编号为 0，正面编号为 1，右侧编号为 2，左侧编号为 3，顶部编号为 4，底部编号为 5。

房子的单独示例：

 

其中按顺序包含房屋正面、右侧、背面和左侧的相同尺寸的图像。

每个图像的宽度是整个图像宽度的 0.25。为了指定要使用的图像部分，我们给出了两个坐标，一个用于左下角，一个用于右上角。对于整个图像，我们将使用 (0, 0) 和 (1, 1)，对于部分图像，坐标值将是 0 和 1 之间的分数。

而不是使用二维坐标，我们使用 4 维
向量（左下 x，左下 y，右上 x，右上 y）

将侧面与零件图像匹配给出
正面，1, (0.0, 0.0, 0.25, 1.0)
右侧，2, (0.25, 0, 0.5, 1.0)
背面，0, (0.5, 0.0, 0.75, 1.0)
左侧, 3, ( 0.75, 0, 1.0, 1.0)
因为看不到顶部和底部，我们将只使用默认值。

faceUV = [];

faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face

faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face

faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side

faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side

 

 除非我们设置另一个选项属性wrap = true，否则其中一些部分图像仍将被旋转。我们像这样创建盒子。

const box = BABYLON.MeshBuilder.CreateBox("box", {faceUV: faceUV, wrap: true});

当然，我们还需要更改用于盒子材质的漫反射纹理的图像。

 在这种情况下，房子是两倍宽，图像的一部分也是如此.

房子的正面和背面（图像的最左侧和最右侧）是一侧（中间图像）宽度的两倍，我们可以使用两次。

代码如下：

    //options parameter to set different images on each side

    const faceUV = [];

    faceUV[0] = new BABYLON.Vector4(0.6, 0.0, 1.0, 1.0); //rear face

    faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.4, 1.0); //front face

    faceUV[2] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //right side

    faceUV[3] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //left side

    // top 4 and bottom 5 not seen so not set

继续，在创建了我们的独立式和半独立式住宅之后，我们希望它们的许多副本形成我们的世界。我们可以分别制作盒子和屋顶的副本，但如果我们可以将盒子和屋顶组合成一个网格，一座房子，那就更容易了。在我们这样做之前，让我们整理一下代码，以便我们可以专注于我们正在添加的新代码。为此，我们将现有代码放入函数中。

const buildBox = () => {

    //texture

    const boxMat = new BABYLON.StandardMaterial("boxMat");

    boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png")

 

    //options parameter to set different images on each side

    const faceUV = [];

    faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face

    faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face

    faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side

    faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side

    // top 4 and bottom 5 not seen so not set

 

    /**** World Objects *****/

    const box = BABYLON.MeshBuilder.CreateBox("box", {faceUV: faceUV, wrap: true});

    box.material = boxMat;

    box.position.y = 0.5;

    return box;

}

const buildRoof = () => {

    //texture

    const roofMat = new BABYLON.StandardMaterial("roofMat");

    roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");

    const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});

    roof.material = roofMat;

    roof.scaling.x = 0.75;

    roof.rotation.z = Math.PI / 2;

    roof.position.y = 1.22;

    return roof;

}