65. 详解常规形状物体

65. 详解常规形状物体

本教程翻译自官方教程Create Set Shapes,各位也可以进入本站镜像站点查看

本文目录

  1. 初识形状物体
  2. 如何使用 MeshBuilder 创建形状物体
    1. 立方体
    2. 材质平铺的立方体
    3. 球体
    4. 圆柱体与圆锥体
    5. 平面
    6. 材质平铺的平面
    7. 圆盘和正多边形
    8. 圆环
    9. 环面纽结体
    10. 地面
    11. 三维地形图
    12. 材质平铺的地面
  3. 延伸阅读
    1. 了解更多的选项信息
    2. 基础 - L1
    3. 中级 - L2
    4. 高级设置 - L3

初识形状物体

    有些形状物体我们在生活中经常用到,我们也非常的熟悉它们的结构。例如一个立方体(或长方体),一个球体,一个圆柱体,一个圆锥,一个正多边形,一个平面和一个水平面。但是 babylon 还为我们提供了一些我们不太常见的形状物体。例如三维地形图,材质平铺的地面,一个环面,一个环结体和多面体。

    我们可以使用 MeshBuilder 方法,通过设置一些选项或者直接使用默认选项就可以创建出这些形状物体。有些选项很容易理解(如 sizediameter ),想要了解更多有关 MeshBuilder 的选项(如 updatablefaceUV )请各位移步到延伸阅读中去进一步探索。

如何使用 MeshBuilder 创建形状物体

下面这行代码格式可以帮助我们创建所有的形状物体

var mesh = BABYLON.MeshBuilder.Create<Shape Name>("name", options, scene);

立方体

示例:

var box = BABYLON.MeshBuilder.CreateBox("box", {height: 5}, scene);
选项 值类型&说明 默认值
size (number)立方体每一面的大小,也就是长宽高统一都是这个值 1
height (number) 单独设置高度Y,覆盖size的高度 size
width (number) 单独设置长度X,覆盖size的长度 size
depth (number) 单独设置宽度Z,也称为深度,覆盖size的深度 size
faceColors (Color4[]) 是一个长度为6的数组,代表立方体的6个面,可以对其分别设置颜色 每个面默认颜色为Color4(1, 1, 1, 1)
faceUV (Vector4[]) 是一个长度为6的数组,代表立方体的6个面,可以对其分别设置纹理贴图的应用范围Vector4,类似background-position 每个面默认 UVs(0, 0, 1, 1)
wrap (boolean) ( BJS 4.0 or >) 设置为 true 则每一个垂直的面(0, 1, 2, 3)将应用垂直的图片纹理 false
topBaseAt (number) (BJS 4.0 or >) base of top touches side given 0, 1, 2, 3 1
bottomBaseAt (number) (BJS 4.0 or >) base of bottom touches side given 0, 1, 2, 3 0
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)

Playground 创建简单立方体的实例

材质平铺的立方体(Tiled Box)

材质平铺的立方体只能通过 MeshBuilder 方法创建。它每一面的材质大小,图案以及材质的对齐方式都一样。
示例:

var tiledBox = BABYLON.MeshBuilder.CreateTiledBox("box", {size:5, tileSize:1}, scene);
选项 值类型&说明 默认值
size (number)立方体每一面的大小,也就是长宽高统一都是这个值 1
height (number) 单独设置高度Y,覆盖size的高度 size
width (number) 单独设置长度X,覆盖size的长度 size
depth (number) 单独设置宽度Z,也称为深度,覆盖size的深度 size
tileSize (number)每一块材质的大小 1
tileHeight (number)材质的高度,覆盖tileSize tileSize
tileWidth (number)材质的宽度 ,覆盖tileSize tileSize
faceColors (Color4[]) 是一个长度为6的数组,代表立方体的6个面,可以对其分别设置Color4颜色 每个面默认Color4(1, 1, 1, 1)
faceUV (Vector4[]) 是一个长度为6的数组,代表立方体的6个面,可以对其分别设置纹理贴图的应用范围Vector4,类似background-position 每个面默认 UVs(0, 0, 1, 1)
pattern (number) 材质图案的平铺方式 NO_FLIP
alignVertical (number) 垂直对齐方式 top, bottom or center CENTER
alignHorizontal (number) 水平对齐方式 left, right or center CENTER
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE

Playground 创建材质平铺的立方体的实例

球体

diameterX diameterY diameterZ设置不同的值时,会创建一个椭圆。示例:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);
选项 值类型&说明 默认值
segments (number) 水平分段数,决定了球体的精度,值越小棱角就越明显 32
diameter (number) 球体通用直径,相当于XYZ方向都是同一个值 1
diameterX (number) X轴直径, 覆盖diameter的X方向的值 diameter
diameterY (number) Y轴直径, 覆盖diameter的Y方向的值 diameter
diameterZ (number) Z轴直径, 覆盖diameter的Z方向的值 diameter
arc (number) 圆周率(纬度方向切割),取值范围0到1,0.5相当于一个半球 1
slice (number) 高度比 (经度方向切割),取值范围0到1,与arc类似,只是切割方向不一样 1
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number) 物体可被看到的面 DEFAULTSIDE
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)

Playground 创建球体的实例

圆柱体与圆锥体

如果我们将 diameterTop 设置为0,可以创建一个圆锥体。将 diameterTopdiameterBottm 设置为不同的值,可以创建一个截锥体。
示例:

var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
选项 值类型&说明 默认值
height (number) 圆柱体的高 2
diameterTop (number) 顶面直径,当为0时,创建圆锥体,覆盖diameter的值 1
diameterBottom (number) 底面直径,不能设置为0,覆盖diameter的值 1
diameter (number) 底面和顶面直径 1
tessellation (number) 水平分段数 24
subdivisions (number) 垂直分段数 1
faceColors (Color4[]) 是一个长度为3的数组, 0 :底面, 1 : 柱面, 2 : 顶面,可以对其分别设置Color4颜色 每个面默认Color4(1, 1, 1, 1)
faceUV (Vector4[]) 是一个长度为3的数组, 0 :底面, 1 : 柱面, 2 : 顶面,可以对其分别设置纹理贴图的应用范围Vector4,类似background-position 每个面默认 UVs(0, 0, 1, 1)
arc (number) 圆周率(纬度方向切割),取值范围0到1 1
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number) 物体可被看到的面 DEFAULTSIDE
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)

Playground 创建圆锥体的实例

平面

一个和XOY面平行的平面
示例:

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, size:5, tileSize:1}, scene);
选项 值类型&说明 默认值
size (number) 平面的大小 1
width (number) 平面的宽度,覆盖size size
height (number) 平面的高度,覆盖size size
updatable (boolean)如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE
sourcePlane (Plane) null
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用

Playground 创建平面的实例

材质平铺的平面(Tiled Plane)

材质平铺的平面只能通过 MeshBuilder 方法创建。我们可以设置材质的大小,图案以及对齐方式。
示例:

var tiledPlane = BABYLON.MeshBuilder.CreateTiledPlane("plane", {width: 5}, scene);
选项 值类型&说明 默认值
size (number)平面的大小值 1
width (number) 平面的宽度,覆盖size size
height (number) 平面的高度,覆盖size size
tileSize (number)每一块材质的大小 1
tileHeight (number)材质的高度,覆盖tileSize tileSize
tileWidth (number)材质的宽度,覆盖tileSize tileSize
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
pattern (number) 材质图案的平铺方式 NO_FLIP
alignVertical (number) 垂直对齐方式 top, bottom or center CENTER
alignHorizontal (number) 水平对齐方式 left, right or center CENTER
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE

Playground 创建材质平铺的平面的实例

圆盘和正多边形

你可以使用 CreateDisc() 创建任何类型的正多边形,通过tessellation 的值来设置多边形的边数。边数设置越大越接近一个实际的圆盘。可以通过设置 arc 来创建一个扇形。
关于圆盘与圆的区别,可以参考圆盘和圆有什么区别?

var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene); // makes a triangle
选项 值类型&说明 默认值
radius (number) 圆盘或多边形的半径 0.5
tessellation (number) 圆盘或多边形的边数 64
arc 圆周率(纬度方向切割),取值范围0到1,0.5相当于一个半球 1
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE

Playground 创建扇形的实例

圆环

示例:

var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.2}, scene);
选项 值类型&说明 默认值
diameter (number) 圆环的直径 1
thickness (number) 圆环的厚度 0.5
tessellation (number) 沿圆周方向的分段数 16
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number) 物体可被看到的面 DEFAULTSIDE
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)

Playground 创建圆环体的实例

环面纽结体

示例:

var torus = BABYLON.MeshBuilder.CreateTorusKnot("tk", {}, scene);
选项 值类型&说明 默认值
radius (number) 环面的半径 2
tube (number) 环面厚度 0.5
radialSegments (number) 环面纽结体径向分段数 32
tubularSegments (number) 每一段圆柱体圆周的分段数 类似与圆柱体的 tessellation 32
p (number) 匝数 2
q (number) 匝数 3
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
sideOrientation (number)物体可被看到的面 DEFAULTSIDE
frontUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)
backUVs (Vector4) 仅当sideOrientation设置为双面时可用 Vector4(0,0, 1,1)

Playground 创建环面纽结体的实例

地面

与XOZ面(X轴-坐标原点-Z轴)平行的水平面。
示例:

var ground = BABYLON.MeshBuilder.CreateGround("gd", {width: 6, subdivisions: 4}, scene);
选项 值类型&说明 默认值
width (number) 宽度 1
height (number) 高度 1
updatable (boolean) 如果设置为true,则表示该物体的顶点数据可以被更新 false
subdivisions (number) 平方细分的数 (将平面等分为多少块) 1

Playground 创建地面的实例

三维地面

var ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap("gdhm", url, {width: 6, subdivisions: 4}, scene);

不要忘记url参数,它是heightmap文件的链接,这是一个灰度等级文件,其中较亮的区域将比较暗的区域显示得更高。

选项 值类型&说明 默认值
width (number) 宽度 10
height (number) 高度 10
subdivisions (number) 地图细分面数 1
minHeight (number) 最低海拔高度 0
maxHeight (number) 最高海拔高度 1
onReady (function) js回调函数,参数为 mesh (刚刚创建的物体实例) (mesh) => {return;}
updatable (boolean) 如果设置为true,则表示该物体可以被更新 false

Playground 创建三维地面的实例

材质平铺的地面

var tiledGround = BABYLON.MeshBuilder.CreateTiledGround("tgd", {subdivisions: {w:4, h:6} }, scene);
选项 值类型&说明 默认值
xmin (number) 宽度 1
zmin (number) 高度 1
xmax (boolean) 如果设置为true,则表示该物体可以被更新 false
zmin (number) 地图细分面数 1
subdivisions ({w: number, h: number}) 地面宽度和高度的分段数,将地面细分为 w*h 块(可以称为瓷砖) {w: 6, h: 6}
precision ({w: number, h: number}) 每一块瓷砖(通过subdivisions细分出来的块)的宽度与高度的细分数 {w: 2, h: 2}
updatable (boolean) 如果设置为true,则表示该物体可以被更新 false

Playground 创建国际象棋棋盘的实例
想要了解关于创建材质平铺地面的更多信息。点击这里

延伸阅读

了解更多的选项信息

Side Orientation
Updatable
Face UV and Face Colors
Front and Back UV
Face Texture Orientation

基础 - L1

Mesh Overview
Set Shapes 101
Parametric Shapes 101
Parametric Shapes
Polyhedra Shapes
Tiled Planes and Boxes
Decals

中级 - L2

Ribbons In Detail

高级 - L3

Maths Makes Ribbons

贡献者

翻译: 阿恒 cnblogs
校对: Catherine catherine__long@126.com
技术支持: 吉吉国王 jijiking@office2.cn / Dushusir github

参与贡献? 联系sevice@office2.cn