65. 详解常规形状物体
65. 详解常规形状物体
本教程翻译自官方教程Create Set Shapes,各位也可以进入本站镜像站点查看
本文目录
初识形状物体
有些形状物体我们在生活中经常用到,我们也非常的熟悉它们的结构。例如一个立方体(或长方体),一个球体,一个圆柱体,一个圆锥,一个正多边形,一个平面和一个水平面。但是 babylon
还为我们提供了一些我们不太常见的形状物体。例如三维地形图,材质平铺的地面,一个环面,一个环结体和多面体。
我们可以使用 MeshBuilder
方法,通过设置一些选项或者直接使用默认选项就可以创建出这些形状物体。有些选项很容易理解(如 size
和 diameter
),想要了解更多有关 MeshBuilder
的选项(如 updatable
或 faceUV
)请各位移步到延伸阅读中去进一步探索。
如何使用 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) |
材质平铺的立方体(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 |
球体
当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) |
圆柱体与圆锥体
如果我们将 diameterTop
设置为0,可以创建一个圆锥体。将 diameterTop
和 diameterBottm
设置为不同的值,可以创建一个截锥体。
示例:
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) |
平面
一个和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设置为双面时可用 |
材质平铺的平面(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 |
圆盘和正多边形
你可以使用 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 |
圆环
示例:
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) |
环面纽结体
示例:
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) |
地面
与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 |
三维地面
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 |
材质平铺的地面
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
高级 - L3
贡献者
翻译: 阿恒 cnblogs
校对: Catherine catherine__long@126.com
技术支持: 吉吉国王 jijiking@office2.cn / Dushusir github
参与贡献? 联系sevice@office2.cn