Babylon.js 第26章 基本的3D网格形状

目录

一、盒子

二、平铺框

三、球体

四、柱体

五、胶囊

六、平面

七、平铺平面

八、光盘

九、圆环

十、圆环结

十一、地面

十二、地面高度图

十三、平铺地面

---

一、盒子

const box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

选项属性	价值	默认值
size	(number)每个盒子边的尺寸	1
height	（数字）高度大小，覆盖大小选项	尺寸
width	（数字）宽度大小，覆盖大小选项	尺寸
depth	（数字）深度大小，覆盖大小选项	尺寸
faceColors	(Color4[]) 6 个Color4数组，每个盒子面一个	每边的 Color4(1, 1, 1, 1)
faceUV	(Vector4[]) 6 个Vector4的数组，每个盒子面一个	每边的 UV(0, 0, 1, 1)
wrap	（布尔值）（BJS 4.0 或 >）当为真时，所有垂直边（0、1、2、3）将垂直应用图像纹理	错误的
topBaseAt	（数字）（BJS 4.0 或 >）给定 0、1、2、3 的顶部接触侧的底部	1
bottomBaseAt	（数字）（BJS 4.0 或 >）底部接触边的底部给定 0、1、2、3	0
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)

mesh:

const box = BABYLON.Mesh.CreateBox("box", size, scene);
const box = BABYLON.Mesh.CreateBox("box", size, scene, updatable, sideOrientation); 

二、平铺框

const box = BABYLON.MeshBuilder.CreateBox("box", options, scene);

选项	价值	默认值
size	(number)每个盒子边的尺寸	1
height	（数字）高度大小，覆盖大小选项	尺寸
weidth	（数字）宽度大小，覆盖大小选项	尺寸
depth	（数字）深度大小，覆盖大小选项	尺寸
tileSize	（数字）每个瓷砖边的大小	1
tileHeight	(number) tile 高度大小，覆盖tileSize选项	瓷砖尺寸
tileWidth	（数字）平铺宽度大小，覆盖tileSize选项	瓷砖尺寸
faceColors	(Color4[]) 6 个Color4数组，每个盒子面一个	每边的 Color4(1, 1, 1, 1)
faceUV	(Vector4[]) 6 个Vector4的数组，每个盒子面一个	每边的 UV(0, 0, 1, 1)
pattern	（数字）瓷砖如何在一个面上反射或旋转	NO_FLIP
alignVertical	(number)将整个图块定位在面的顶部、底部或中心	中央
alignHorizontal	(number)将整个图块定位在面的左侧、右侧或中心	中央
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧

options模式属性的值是以下常量

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

当平面的宽度或高度无法容纳整数个瓦片时，“切割”瓦片并使用部分瓦片填充平面。发生这种情况时，您可以安排零件拼贴的放置位置，可以在平面的一个边缘上，也可以均匀地在两个相对的边缘上。您可以通过在选项中设置alignVertical和alignHorizo ​​ntal 以及您希望放置整个图块的位置来执行此操作。例如，将alignHorizo​​ntal设置为LEFT意味着最左边的瓦片列将是整个瓦片，而部分瓦片将在最右边的列中。以下常量可用于alignVertical和alignHorizo​​ntal

三、球体

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", options, scene);

选项	价值	默认值
segments	(number)水平段数	32
diameter	(number)球体直径	1
diameterX	(数字) X 轴上的直径，覆盖直径选项	直径
diameterY	(数字) Y 轴上的直径，覆盖直径选项	直径
diameterZ	(数字) Z 轴上的直径，覆盖直径选项	直径
arc	(number)圆周率（纬度）在 0 和 1 之间	1
slice	(number)高度（经度）在 0 和 1 之间的比率	1
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	矢量4（0, 0, 1,1）
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	矢量4（0, 0, 1,1）

mesh:

const sphere = BABYLON.Mesh.CreateSphere("sphere", segments, diameter, scene);
const sphere = BABYLON.Mesh.CreateSphere("sphere", segments, 
    diameter, scene, updatable, sideOrientation);

四、柱体

const cone = BABYLON.MeshBuilder.CreateCylinder("cone", options, scene);

选项	价值	默认值
height	(number)圆柱高度	2
diameterTop	（数字）顶盖的直径，可以为零以创建圆锥，覆盖直径选项	1
diameterBottom	(number)底盖的直径，不能为零，覆盖直径选项	1
diameter	(number)两个盖子的直径	1
tessellation	(number)径向边数	24
subdivisions	(number)环数	1
faceColors	(Color4[]) 3 个Color4的数组，0：底盖，1：缸筒，2：顶盖	每个面的 Color4(1, 1, 1, 1)
faceUV	(Vector4[]) 3 个Vector4的数组，0：底盖，1：气缸管，2：顶盖	每个面的 UV(0, 0, 1, 1)
arc	（数字）圆周率在 0 和 1 之间	1
hasRings	(boolean)使细分彼此独立，因此它们成为不同的面	错误的
enclose	（布尔值）每个细分为切片圆柱体添加两个额外的面，以围绕其高度轴关闭它	错误的
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)

mesh:

const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", height, 
    diameterTop, diameterBottom, tessellation, subdivisions, scene);
const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", height, 
    diameterTop, diameterBottom, tessellation, 
    subdivisions, scene, updatable, sideOrientation);

五、胶囊

const capsule = BABYLON.MeshBuilder.CreateCapsule("ribbon", options, scene);

选项	价值	默认值
orientation?	(Vector3)胶囊开始时的方向。	Vector3.Up
subdivisions	（数字）胶囊管段上平行于方向的子段数。	2
tessellation	(number) 胶囊上圆柱段的数量。	16
height	（数字） 胶囊的高度或长度。	1
radius	（数字）胶囊的半径。	0.25
capSubdivisions	（数字）胶囊帽部分上平行于方向的子段数。	6
radiusTop?	（数字） 覆盖顶部半径。
radiusBottom?	（数字） 覆盖底部半径。
topCapSubdivisions?	（数字）覆盖顶盖细分。
bottomCapSubdivisions?	（数字）覆盖底盖细分。

mesh:

const capsule = BABYLON.Mesh.CreateCapsule("ribbon", options, scene); 

六、平面

const capsule = BABYLON.Mesh.CreateCapsule("ribbon", options, scene); 

选项	价值	默认值
size	(number)平面的边尺寸	1
width	(number)宽度的大小	尺寸
height	(number)高度的大小	尺寸
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧
sourcePlane	（平面）源平面（数学）网格将被转换为	无效的
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)

mesh:

const plane = BABYLON.Mesh.CreatePlane("plane", size, scene);
const plane = BABYLON.Mesh.CreatePlane("plane", size, scene,
     updatable, sideOrientation); 

七、平铺平面

const tiledPlane = BABYLON.MeshBuilder.CreateTiledPlane("plane", options, scene);

选项	价值	默认值
size	(number)平面的边尺寸	1
width	(number)宽度的大小	尺寸
height	(number)高度的大小	尺寸
tileSize	（数字）每个瓷砖边的大小	1
tileHeight	(number) tile 高度大小，覆盖tileSize选项	瓷砖尺寸
tileWidth	（数字）平铺宽度大小，覆盖tileSize选项	瓷砖尺寸
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
pattern	（数字）瓷砖如何反射或旋转	NO_FLIP
alignVertical	(number)将整个图块定位在面的顶部、底部或中心	中央
alignHorizontal	(number)将整个图块定位在面的左侧、右侧或中心	中央
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧

options模式属性的值是以下常量

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

八、光盘

const disc = BABYLON.MeshBuilder.CreateDisc("disc", options, scene);

选项	价值	默认值
radius	(number)圆盘或多边形的半径	0.5
tessellation	(number)圆盘/多边形边的数量	64
arc	（数字）圆周率在 0 和 1 之间	1
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧

mesh:

const disc = BABYLON.Mesh.CreateDisc("disc", radius, tessellation, scene);
const disc = BABYLON.Mesh.CreateDisc("disc", radius,
     tessellation, scene, updatable, sideOrientation);

九、圆环

选项	价值	默认值
diameter	(number)圆环的直径	1
thickness	(number)其管的厚度	0.5
tessellation	(number)沿圆的段数	16
updatable	（布尔值）如果网格是可更新的，则为真	错误的
sideOrientation	（数字）侧向	默认侧
frontUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
backUVs	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)

mesh:

const torus = BABYLON.Mesh.CreateTorus("torus", diameter, thickness,
     tessellation, scene);
const torus = BABYLON.Mesh.CreateTorus("torus", diameter, thickness, 
    tessellation, scene, updatable, sideOrientation);

十、圆环结

const torus = BABYLON.MeshBuilder.CreateTorusKnot("torusKnot", options, scene);

选项	价值	默认值
radius	（数字）圆环结的半径	2
radius	(number)其管的厚度	0.5
radius	(number)径向段数	32
radius	(number)管段数	32
p	(number)绕组数	2
q	(number)绕组数	3
radius	（布尔值）如果网格是可更新的，则为真	错误的
radius	（数字）侧向	默认侧
radius	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)
radius	(Vector4) 仅当 sideOrientation:BABYLON.Mesh.DOUBLESIDE 设置时	Vector4(0,0, 1,1)

mesh:

const knot = BABYLON.Mesh.CreateTorusKnot("knot", radius, tube, 
    radialSegments, tubularSegments, p, q, scene);
const knot = BABYLON.Mesh.CreateTorusKnot("knot", radius, tube, 
    radialSegments, tubularSegments, p, q, scene, updatable, sideOrientation);

十一、地面

const ground = BABYLON.MeshBuilder.CreateGround("ground", options, scene);

选项	价值	默认值
width	(number)宽度的大小	1
height	(number)高度的大小	1
updatable	（布尔值）如果网格是可更新的，则为真	错误的
subdivisions	(number)平方细分数	1

mesh:

const ground = BABYLON.Mesh.CreateGround("ground", width, height,
     subdivisions, scene);
const ground = BABYLON.Mesh.CreateGround("ground", width, height,
     subdivisions, scene, updatable);

十二、地面高度图

const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", 
    url_to_height_map, options, scene);

选项	价值	默认值
width	(number)地图宽度的大小	10
height	(number)地图高度的大小	10
subdivisions	(number)地图细分的数量	1
minHeight	(number)最低高度	0
maxHeight	(number)最大高度	1
onReady	(function)一个回调 js 函数，被调用并传递刚刚构建的网格	（网格）=> {返回；}
updatable	（布尔值）如果网格是可更新的，则为真	错误的

mesh:

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", 
    heightMapPath, width, height, subdivisions, minHeight, 
    maxHeight, scene, updatable, onReadyCallback);

十三、平铺地面

var tiledGround = BABYLON.MeshBuilder.CreateTiledGround(
    "tiled ground", options, scene);

选项	价值	默认值
xmin	(number)地图最小 x 坐标值	-1
zmin	(number) map min z 坐标值	-1
xmax	(number)地图最大 x 坐标值	1
zmin	(number)地图最大 z 坐标值	1
subdivisions	object ( {w: number, h: number} )地图高度和宽度上的细分（瓦片）数量	{w：6，h：6}
precision	( {w: number, h: number} )每个图块的高度和宽度上的细分数	{w：2，h：2}
updatable	（布尔值）如果网格是可更新的，则为真	错误的

创建平铺地面： 

• 创建平铺地面
• 创建每个瓷砖所需的材料
• 创建多种材质并将每种材质推送到其 subMaterials 数组中
• 将多材质设置为平铺地面的材质
• 将 Tiled Ground 的 subMeshes 属性设置为空数组
• 为这些变量创建和设置值

const verticesCount = tiledGround.getTotalVertices();
const tileIndicesLength = tiledGround.getIndices().length / (
    subdivisions.w * subdivisions.h);

let base = 0;
for (let row = 0; row < grid.h; row++) {
  for (let col = 0; col < grid.w; col++) {
    new BABYLON.SubMesh(row % 2 ^ col % 2, 0, 
    verticesCount, base, tileIndicesLength, tiledGround);
    base += tileIndicesLength;
  }
}

 mesh:

const tiledGround = BABYLON.Mesh.CreateTiledGround(
    "Tiled Ground", xmin, zmin, xmax, zmax, subdivisions, precision, scene);
const tiledGround = BABYLON.Mesh.CreateTiledGround(
    "Tiled Ground", xmin, zmin, xmax, zmax, subdivisions,
     precision, scene, updatable);