【Babylonjs】认识基本元素

二、认识基本元素

    每个形状都有它自己的名字，例如立方体（box 或者 cuboid）、球体（sphere）、圆柱体（cylinder）、圆锥体（cone）、规则多边行（regular polygons）、平面（plane）以及特殊的水平面——地面（ground）。还包括一些形状例如圆环（torus）、圆环结（torus knot）以及多面体（polyhedra）。等到你学习了下一节的内容就可以通过数据集和参数形成的形状创建没有被定义名称的形状。这些被称为参数形状。

MeshBuilder 方法

    通常来说创建一个形状使用如下代码：

var shape = BABYLON.MeshBuilder.CreateShape(name,options,scene);

options选项能够使你设定形状的大小，是否实时更新等。如下表：

立方体（Box）

var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene); 
var myBox = BABYLON.MeshBuilder.CreateBox("myBox", {height: 5, width: 2, depth: 0.5}, scene);

选项	含义	默认值
size	(number) 立方体的大小	1
height	(number) 高度，覆盖大小属性	size
width	(number) 宽度，覆盖大小属性	size
depth	(number) 深度，覆盖大小属性	size
faceColors	(Color4[]) 数组里有6个颜色，每一个面对应一个	Color4(1, 1, 1, 1) for each side
faceUV	(Vector4[]) 数组里有6个向量，每一个面对应一个	UVs(0, 0, 1, 1) for each side
updatable	(boolean) 是否更新，true则形状不停更新	false
sideOrientation	(number)排列方向	DEFAULTSIDE

*sideOrientation和Threejs的side类似，为0的时候正面隐藏只能看到形状的反面，为1时看到的是正面，为2时为双面显示。

尝试一下

球体（Sphere）

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene); 
var mySphere = BABYLON.MeshBuilder.CreateSphere("mySphere", {diameter: 2, diameterX: 3}, scene);

选项	含义	默认值
segments	(number) 水平分段的数值	32
diameter	(number) 直径	1
diameterX	(number) X轴的直径，覆盖直径属性	diameter
diameterY	(number) Y轴的直径，覆盖直径属性	diameter
diameterZ	(number) Z轴的直径，覆盖直径属性	diameter
arc	(number) 周长（纬度）在0和1之间的比率	1
slice	(number) 高度（经度）在0和1之间的比率	1
updatable	(boolean) 是否更新，true则形状不停更新	false
sideOrientation	(number) 排列方向	DEFAULTSIDE

尝试一下

平面（Plane）

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {}, scene); 
var myPlane = BABYLON.MeshBuilder.CreatePlane("myPlane", {width: 5, height: 2}, scene);

选项	含义	默认值
size	(number) 平面的大小	1
width	(number) 宽度	size
height	(number) 高度	size
updatable	(boolean)是否更新，true则形状不停跟新	false
sideOrientation	(number) 排列方向	DEFAULTSIDE
frontUVs	(Vector4[]) 只有在sideOrientation为BABYLON.Mesh.DOUBLESIDE的时候生效，用于定义前面的面的UV方向	Vector4(0,0, 1,1)
backUVs	(Vector4[]) 只有在sideOrientation为BABYLON.Mesh.DOUBLESIDE的时候生效，用于定义后面的面的UV方向	Vector4(0,0, 1,1)
sourcePlane	(Plane) 形状将会被转换为源平面(maths)	null

尝试一下

sourcePlane 对平面来说是一个唯一的选项，它提供一种排列摆放位置的方法，目前它的排列定向为向量vector（0,0,1）。如果你希望方向是向量vector（0,-1,1），那么你就创建一个源平面。

var sourcePlane = new BABYLON.Plane(0, -1, 1, 0);
sourcePlane.normalize();

这就创建了一个数学平面，作为方向源。第四个参数是在方向向量方向移动的距离。

尝试一下

地面（Ground）

var ground = BABYLON.MeshBuilder.CreateGround("ground", {}, scene); 
var myGround = BABYLON.MeshBuilder.CreateGround("myGround", {width: 6, height: 4, subdivsions: 4}, scene);

选项	含义	默认值
width	(number) 宽度	1
height	(number) 高度	1
updatable	(boolean) 是否更新	false
subdivisions	(number) 平方细分数	1

尝试一下

可以通过heightMap使用CreateGroundFromHeightMap创造一个形成起伏的地面而不是一个平坦的地面。

面的颜色及UV（Face Colors or UV）

只在数量有限的拥有不同的面的形状可用，例如立方体（Box）而球体（shpere）不可用。这个属性允许你去给每一个面赋予独立的颜色以及图片。

是否更新（Updatable）

若将该属性设置为true，则改变网格的每个顶点相关的数据和改变形状的网格都会在场景里的更新。

排列顺序（Side Orientation）

这个选项被用来描述图形的每一个面如何被观察。

选项有四个可能的值：

• BABYLON.Mesh.FRONTSIDE, //前面

• BABYLON.Mesh.BACKSIDE,//后面

• BABYLON.Mesh.DOUBLESIDE,//双面

• BABYLON.Mesh.DEFAULT//默认值，等同于前面

在案例中，你可以通过拖动你的场景旋转平面的朝向来发现各个属性的差别。

尝试一下

前后面的UV（Front and Back UV）

当一个形状有sideOrientation选项，它被设置为双面时才有可能前后来显示不同的图像。