1 Babylonjs基础入门 创建基础的模型

Posted 2022-12-28 暮志未晚Webgl

此内容通过官方文档加个人理解制作而成。由于个人能力有限，如果有不理解的请去官网寻找资料，或者加我群互相讨论。

MeshBuilder 方法

创建模型的方法一般是：

var shape = BABYLON.MeshBuilder.Create Shape（名称，配置项，场景）;

配置项的参数允许你设置形状大小以及是否可以更新它之类的操作。

创建立方体

创建一个默认的立方体

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[]）六个颜色对象组成的数组，每个颜色代表一个面的显示颜色	每个面默认 Color(1,1,1,1)
faceUV	(Vector4[]) 由六个四维向量组成的数组，每个代表一个面的uv映射	每个面的uv映射从 0,0 到 1,1
updatable	（boolean）如果网格是可更新的，则设置为true	false
sideOrientation	（number）面的显示方向	DEFAULTSIDE

创建球体

创建默认的球体

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

创建平面

创建一个默认的平面

var plane = BABYLON.MeshBuilder.CreatePlane("plane", , scene);

创建一个带有配置项的平面

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

选项	值	默认值
size	（number）平面每个边的长度	1
height	（number）平面的高度	size
width	（number）平面的宽度	size
updatable	（boolean）如果网格是可更新的，则设置为true	false
sideOrientation	（number）面的显示方向	DEFAULTSIDE
frontUVs	（Vector4[]）正面UV映射，只有在sideOrientation 设置为双面（BABYLON.Mesh.DOUBLESIDE）时使用	Vector4（0,0,1,1）
backUVs	（Vector4[]）背面UV映射，只有在sideOrientation 设置为双面（BABYLON.Mesh.DOUBLESIDE）时使用	Vector4（0,0,1,1）
sourcePlane	（Plane）这是数学平面，用于修改平面网格的位置朝向	空值

sourcePlane是平面网格独有的选项，在创建数学平面时，前三个值代码当位置点在面的方向，第四个值为面与位置点的距离。不创建则面的默认朝向Z轴正方向 (0, 0, 1），如果需要修改朝向：

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

上面将面的朝向修改为 (0, -1, 1)。

创建地面

创建一个默认的地面

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

创建一个自定义的地面

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

选项	值	默认值
size	（number）地面每个边的长度	1
height	（number）地面的高度	size
width	（number）地面的宽度	size
updatable	（boolean）如果网格是可更新的，则设置为true	false
subdivisions	（number）将地面分成的几块	1

地面创建有一个扩展是CreateGroundFromHeightMap，它可以允许你创建起伏的地面而不是平面，后面我将更新相关的文章。

更新模型属性

updatable 属性设置可以允许我们更新当前模型，具体案例将在后面更新。

面的可见性

sideOrientation 属性可以设置当前面的可见性。
此属性可以设置四种值：
BABYLON.Mesh.FRONTSIDE 仅正面可见
BABYLON.Mesh.BACKSIDE 仅背面可见
BABYLON.Mesh.DOUBLESIDE 正背面都可见
BABYLON.Mesh.DEFAULT 默认值，等同于正面可见

设置面的uv映射

这个属性只有可以在设置面正反面都可见时设置，即正反面可以显示不同的内容。