70. 平面和立方体的表面进行材质平铺

本教程翻译自官方教程Create Tiled Planes and Boxes，各位也可以进入本站镜像站点查看

本文目录

平面材质平铺

示例

立方体材质平铺

示例

延伸阅读

中等难度 - L2

平面材质平铺 Tiled Plane

平面上的每一块图案都使用相同的纹理源，具有相同的平铺宽度和平铺高度

通过选择不同的纹理图片,设置不同的大小，可以得到各种图案的平面。

这里有关于创建平铺平面的选项

var tiledPlane = BABYLON.CreateTiledPlane("tiled_plane", options, scene);

可以通过设置 pattern 不同的值，来进行翻转(filp)180度(以图案的右边翻转轴进行180翻转)，或者是旋转(rotate)180度(以图案的中心为旋转轴，旋转180度)。下面是 pattern 的可选值。

BABYLON.Mesh.NO_FLIP, default 
BABYLON.Mesh.FLIP_TILE,
BABYLON.Mesh.ROTATE_TILE,
BABYLON.Mesh.FLIP_ROW,
BABYLON.Mesh.ROTATE_ROW,
BABYLON.Mesh.FLIP_N_ROTATE_TILE,
BABYLON.Mesh.FLIP_N_ROTATE_ROW

以 TILE 结尾的值是指每一个图案都进行翻转或旋转，以 ROW 结尾的值是值整个交替行被翻转或旋转。(每一行的图案表现一致)

当平面的宽度或者高度不是刚好放置整数个图案，需要进行裁剪来填补平面的时候。我们可以通过设置 alignVertical 和 alignHorizontal 来确定图案的放置位置。例如，将 alignHorizontal 设置为 LEFT 意味着最左边的一列将是完整的一列，而右边的一列则是被裁剪的。下面是可选参数值：

alignVertical

BABYLON.Mesh.CENTER, default
BABYLON.Mesh.TOP,
BABYLON.Mesh.BOTTOM

alignHorizontal

BABYLON.Mesh.CENTER, default
BABYLON.Mesh.LEFT,
BABYLON.Mesh.RIGHT

所以图案一共有63(7 * 3 * 3)种不同的排列方式。

Playground 63种排列方式示例

使用frontUVs 和 backUVs 可以设置平面的正面和背面使用一个图片的不同部分进行图案填充。

var f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the width 
var b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width

var options = {
    frontUVs: f,
    backUVs: b,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE
}

playground 平面的正面与反面

示例

Patterns

tile width: 1, tile height: 1

Alternating Patterns

tile width : 2, tile height : 1

Brick Pattern

tile width : 3, tile height : 1

Playground Brick Pattern

立方体材质平铺 Tiled Box

一个材质平铺的立方体是由六个材质平铺的平面构成，所以所有的面都由相同大小的和相同的材质组成。使用 faceUV 数组可以指定每一个面的材质了解更多

除了frontUVs 和 bavkUVs之外，平面的所有选项都适用于立方体的选项。

我们可以通过下面的代码进行创建

var tiledBox = BABYLON.CreateTiledBox("tiled_box", options, scene);

示例

tile width : 1, tile height : 1

playground 每一面材质都不同的立方体

Note that the the tile pattern is arranged so that all vertical sides have the same pattern and at the edge where the front and top side meets the alignment matches.
请注意，图案的排列方式使所有垂直的边具有相同的图案，并且在前面和顶部的边满足对齐匹配的边缘处

请注意，瓷砖图案的排列方式应使所有垂直边都具有相同的图案，并且在正面和顶面的边缘处符合该对齐方式。

Playground Example

To see the headings for the 63 arrangements view the full playground.

Playground Example

70. 平面和立方体的表面进行材质平铺

70. 平面和立方体的表面进行材质平铺

平面材质平铺 Tiled Plane

示例

立方体材质平铺 Tiled Box

示例

延伸阅读

了解更多的选项信息

基础 - L1

贡献者

70. 平面和立方体的表面进行材质平铺

平面材质平铺 Tiled Plane

示例

立方体 材质平铺 Tiled Box

示例

延伸阅读

了解更多的选项信息

基础 - L1

贡献者

立方体材质平铺 Tiled Box