4. 了解常规形状物体及其要素
4. 了解基本形状物体及其要素
本教程翻译自官方教程Discover Basic Elements，各位也可以进入本站镜像站点查看
本文目录
常规形状-101课程
有一些基本的形状是我们在日常生活中经常遇到的，例如：盒子(立方体)、球体、圆柱、圆锥、规则多边形(三面体、四面体)、平面以及地面(一种特殊的水平平面)。还有一些形状比上面那些知名度差一点的，包括：圆环、环形节以及多面体等，它们其实也包含在常规形状中，我们将在本章介绍上述这些常规形状。而还有一些可能并是很常见的形状，我们将在接下来的第5章具有参数化形状的物体中进行介绍，它们没有固定的形状，一般需要设置对应数据集或者参数才能画出来，例如：线条、线段、挤压形状、车床形状等。
babylon101是作为babylon的入门课程，所以在本章中只介绍几个最基本的常规形状物体，包括：立方体、球体、平面和地面。此外，我们在课程中会使用 MeshBuilder 方法来创建物体，可能你在Playground中会接触到老版本 BABYLON.Mesh.Create 的创建方法，这个方法已经淘汰，所以请特别的注意。关于两个方法的优缺点以及详细介绍各位也可以到延伸阅读中去进一步探索。
MeshBuilder方法介绍
创建一个形状的通用语句如下：
var shape = BABYLON.MeshBuilder.CreateShape(name, options, scene);//CreateShape中的Shape可替换为想要创建的物体名称
第一个参数表示这个物体的名称，第三个参数是加入到的场景scene变量，我们重点介绍第二的参数 options 可以为物体设置一些体积、长宽、是否可更改等参数，具体针对每种形状的创建示例和 options 参数说明如下：
立方体Box
// 创建默认立方体
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
// 设置长宽高并创建
var myBox = BABYLON.MeshBuilder.CreateBox("myBox", {height: 5, width: 2, depth: 0.5}, scene);
| option | 值类型&说明 | 默认值 |
|---|---|---|
| size | (number) 立方体每一面的大小，也就是长宽高统一都是这个值 | 1 |
| height | (number) 单独设置高度Y，覆盖size的高度 | size |
| width | (number) 单独设置长度X，覆盖size的长度 | size |
| depth | (number) 单独设置宽度Z，也称为深度，覆盖size的长度 | size |
| faceColors | (Color4[]) 是一个长度为6的数组，代表立方体的6个面，可以对其分别设置Color4颜色 | 每个面默认Color4(1, 1, 1, 1) |
| faceUV | (Vector4[]) 是一个长度为6的数组，代表立方体的6个面，可以对其分别设置纹理贴图的应用范围Vector4,类似background-position | 每个面默认Vector4(0, 0, 1, 1) |
| updatable | (boolean) 如果设置为true，则表示该物体的顶点数据可以被更新 | false |
| sideOrientation | (number) 物体可被看到的面 | 默认0，正面，可选：0 正面，1 背面，2 双面 |
球体Sphere
// 创建默认球体
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);
// 设置直径并创建
var mySphere = BABYLON.MeshBuilder.CreateSphere("mySphere", {diameter: 2, diameterX: 3}, scene);
| option | 值类型&说明 | 默认值 |
|---|---|---|
| segments | (number) 水平分段数，决定了球体的精度，值越小棱角就越明显 | 32 |
| diameter | (number) 球体通用直径，相当于XYZ方向都是同一个值 | 1 |
| diameterX | (number) X轴直径, 覆盖diameter的X方向的值 | diameter |
| diameterY | (number) Y轴直径, 覆盖diameter的X方向的值 | diameter |
| diameterZ | (number) Z轴直径, 覆盖diameter的X方向的值 | diameter |
| arc | (number) 圆周率(纬度方向切割)，取值范围0到1，0.5相当于一个半球 | 1 |
| slice | (number) 高度比 (经度方向切割)，取值范围0到1，与arc类似，只是切割方向不一样 | 1 |
| updatable | (boolean) 如果设置为true，则表示该物体的顶点数据可以被更新 | false |
| sideOrientation | (number) 物体可被看到的面 | 默认0，正面，可选：0 正面，1 背面，2 双面 |
平面Plane
// 创建默认平面
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {}, scene);
// 设置宽高并创建
var myPlane = BABYLON.MeshBuilder.CreatePlane("myPlane", {width: 5, height: 2}, scene);
| option | 值类型&说明 | 默认值 |
|---|---|---|
| size | (number) 平面长度和高度，统一都是这个值，默认是个正方形 | 1 |
| width | (number) 单独设置长度X，覆盖size的高度 | size |
| height | (number) 单独设置高度Y，覆盖size的高度 | size |
| updatable | (boolean) 如果设置为true，则表示该物体的顶点数据可以被更新 | false |
| sideOrientation | (number) 物体可被看到的面，3D世界的计算比较耗费资源，一般相机移动到物体的背面，为了节省资源就默认不显示这个物体了 | 默认0，正面，可选：0 正面，1 背面，2 双面 |
| frontUVs | (Vector4) 仅当sideOrientation设置为双面时可用，和faceUV的作用类似，因为平面没有深度只有2个面，只能按照这个方法来设置正面，类似background-position | Vector4(0,0, 1,1) |
| backUVs | (Vector4) 仅当sideOrientation设置为双面时可用，和faceUV的作用类似，因为平面没有深度只有2个面，只能按照这个方法来设置背面，类似background-position | Vector4(0,0, 1,1) |
| sourcePlane | (Plane) 一种平面的定位方法，可以更改平台的位置和角度，这也可以用position和rotation来实现 | null |
只有平面有sourcePlane这个选项，它提供了一种方法，用于修改平面的位置和方向，如果想让平面朝向某一个固定方向，这个方法挺有用。举个例子，现在我们只考虑平面的方向，在初始化时平面默认的方向是vector3(0，0，1)。如果希望把方向调整为vector3(0，-1，1)，则使用如下代码：
var sourcePlane = new BABYLON.Plane(0, -1, 1, 0);
sourcePlane.normalize();
以上代码创建了一个用于定位方向的计算辅助平面。第4个参数是在方向轨道上移动的距离，在例子中设置为0，表示不移动。下面我们来看看效果演示：
Playground 平面使用sourcePlane参数实例
地面Ground
var ground = BABYLON.MeshBuilder.CreateGround("ground", {}, scene); //default ground
var myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 6, height: 4, subdivisions: 4}, scene);
| option | 值类型&说明 | 默认值 |
|---|---|---|
| width | (number) 地面的长度 | 1 |
| height | (number) 地面的宽度，这里与平面有区别，默认创建的时候地面是水平的，而平面是垂直的 | 1 |
| updatable | (boolean) 如果设置为true，则表示该物体的顶点数据可以被更新 | false |
| subdivisions | (number) 细分数，可以把地面进行等分，就像瓷砖那样每一块都有同一个图案 | 1 |
还有一种特殊的地面，我们称之为高低图,它让平坦的地面产生了有山谷的地形效果。
FaceColors和FaceUV详解
顾名思义，Face代表物体的面，所以FaceColors和FaceUV只能用在具有面的物体上，例如立方体，而球体就没有这两个选项。FaceColors能够设置物体每个面的颜色，而FaceUV与纹理贴图有很大的关系，这类似于css sprite，可以把一张图的不同部分展示到物体的每个面上。更详细的内容请看这里
Updatable可更新形状的物体
Babylon中的物体都是由一组顶点数据经过彼此之间的连接构成，如果一个物体Option中的updatable参数设置为true，那么这个物体的顶点数据就能够被修改，这意味着物体能够改变形状。有关更详细的内容，可以看这里怎么样更新顶点
SideOrientation选项
3D世界的计算比较耗费资源，一般相机移动到物体的背面，为了节省资源就默认不显示这个物体了，所以在创建物体时SideOrientation都为正面。如果选择反面，那么当相机位于物体的正面时，物体就被隐藏了。如果选择了双面，无论相机如果移动，那么物体都会被显示出来，这也是最耗费电脑资源的方式。
SideOrientation有4个可能的选项：
- BABYLON.Mesh.FRONTSIDE，表示正面。
- BABYLON.Mesh.BACKSIDE，表示反面。
- BABYLON.Mesh.DOUBLESIDE，表示双面。
- BABYLON.Mesh.DEFAULT，目前这个值和FRONTSIDE相等
各位可能比较奇怪，SideOrientation在参数说明里不是接受的是数字么？怎么在这里变成了 BABYLON.Mesh.FRONTSIDE 这种形式。其实这是Babylon提供的一种易于阅读的参数类，各位可以在控制台自己打印一下。BABYLON.Mesh.FRONTSIDE的值是0，BACKSIDE是1，DOUBLESIDE是2，DEFAULT也是1。在下面的例子中，大家可以通过左右移动鼠标来改变相机位置，比较一下正面和双面两种设置的异同：
Playground 显示正面的平面示例
Playground 显示双面的平面示例
FrontUV和BackUV
之前的段落介绍了FaceUV的使用，FrontUV和BackUV与它类似，都是用来把一张图的不同部分展示到物体的每个面上，但不同的是FrontUV和BackUV只用在只有正反面的物体上，例如平面，FrontUV用来设置正面，而BackUV用来设置反面。而请大家注意，只有当SideOrientation选项设置为双面时，这两个选项才能够起作用。各位可以从应用不同的材质到物体的正反面来查看更详细的介绍。
Vect3和Vect4
向量是3D世界中的基本单位，Vect3表示三维向量，也叫作三元数。Vect4表示四维向量，也叫作四元数。Vect3用得比较多，例如位置、旋转、放大缩小都使用了Vect3，用它来表示X、Y、Z 这3个不同的坐标。而Vect4一般用来做三维空间的旋转变换，具体可以看看知乎的一篇科普文章如何形象地理解四元数？
var position = new BABYLON.Vect3(1,1,1);//三维向量
var quaternion = new BABYLON.Vect4(1,1,1,1);//四维向量
Color3和Color4
顾名思义，这代表了颜色，Color3表示rgb，Color4表示rgba，只是Babylon中的Color值都是用0至1表示的，例如Color3(0.5,0.5,0.5)，就相当于rgb(128,128,128)。
var rgb = new BABYLON.Color3(0.5, 0.5, 0.5);//颜色
var rgba = new BABYLON.Color3(0.5, 0.5, 0.5, 1);//透明度颜色
之后将学习到的东西
当你创建一个物体的时候，它总是有一个固定位置和默认方向，但是只有移动它到合适的位置，并调整到一个角度才能更好的达到你的目的。可以直接查看物体的位置和旋转来学习如果做到。
下一步
现在你已经掌握了常规形状的创建方法，下面将更近一步学习5. 具有参数化形状的物体
延伸阅读
基础教程-难度L1
如何使用MeshBuilder方法来创建常规物体
如何使用旧方法来创建常规物体
MeshBuilder与旧方法的比较
贡献者
参与贡献? 联系alexads@foxmail.com