Babylon.js 第28章 多面体

目录

一、数字提供多面体

1、创建多面体

1、创建自定义多面体

二、象形球

 三、测地线多面体

四、格登堡多面体

1、创建 

2、属性

3、方法

4、纹理

 5、放置网格

一、数字提供多面体

1、创建多面体

 使用网格生成：

const polyhedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", options, scene);

mesh:

const polyhedron = BABYLON.Mesh.CreatePolyhedron("oct", options, scene);

1、创建自定义多面体

主要是通过custom属性来自定义

const heptagonalPrism = { "name":"Heptagonal Prism", "category":
    ["Prism"], "vertex":[[0,0,1.090071],[0.796065,0,0.7446715],
[-0.1498633,0.7818315,0.7446715],[-0.7396399,-0.2943675,0.7446715],
[0.6462017,0.7818315,0.3992718],[1.049102,-0.2943675,-0.03143449],
[-0.8895032,0.487464,0.3992718],[-0.8658909,-0.6614378,-0.03143449],
[0.8992386,0.487464,-0.3768342],[0.5685687,-0.6614378,-0.6538232],
[-1.015754,0.1203937,-0.3768342],[-0.2836832,-0.8247995,-0.6538232],
[0.4187054,0.1203937,-0.9992228],[-0.4335465,-0.042968,-0.9992228]],

"face":[[0,1,4,2],[0,2,6,3],[1,5,8,4],[3,6,10,7],[5,9,12,8],
[7,10,13,11],[9,11,13,12],[0,3,7,11,9,5,1],[2,4,8,12,13,10,6]]};

然后：

let o=BABYLON.MeshBuilder.CreatePolyhedron('o',{custom:heptagonalPrism},scene)

二、象形球

const icosphere = BABYLON.MeshBuilder.CreateIcoSphere("icosphere", options, scene);

mesh:

const icosphere = BABYLON.Mesh.CreateIcoSphere("icosphere", options, scene);

 三、测地线多面体

const geodesic = BABYLON.MeshBuilder.CreateGeodesic("geodesic", options, scene);

四、格登堡多面体

1、创建 

const goldbergPoly = BABYLON.MeshBuilder.CreateGoldberg("goldberg", options, scene); 

er

2、属性

除了标准网格的特征之外，还有许多只读特征存储在属性goldbergData对象中。访问每个遵循以下示例模式

const goldbergPoly = BABYLON.MeshBuilder.CreateGoldberg("goldberg", options);
const nbFaces = goldbergPoly.goldbergData.nbFaces;
const centerOfFace32 = goldbergPoly.goldbergData.faceCenters[32];

 矢量属性 faceCenters[face] 和 faceXaxis[face]、faceYaxis[face] 和 faceZaxis[face] 可以用作参考框架，在给定的面上放置网格。

3、方法

面组可以使用着色,其中colorArray是 [start face, end face, Color4] 形式的元素数组

const colorArray = [
  [18, 18, new BABYLON.Color4(1, 0, 0, 1)],
  [26, 37, new BABYLON.Color4(0, 1, 0, 1)],
];

goldbergPoly.setGoldbergFaceColors(colorArray);//无论网格是否可更新，都重置面UV 
goldbergPoly.updateGoldbergFaceColors(colorArray);//仅当网格可更新时才重置面 UV 

4、纹理

使用纹理,其中uvArray是 [start face, end face, center, radius, angle] 形式的元素数组,center 是一个 Vector2，其中 0 ≤ x、≤ 1 和 0 ≤ y ≤ 1 给出图像内给定半径并以给定角度设置的五边形/六边形的相对中心。使用的图像应该是方形的，以防止纹理失真。

const uvArray = [
  [18, 18, new BABYLON.Vector2(0.25, 0.75), 0.25, 0],
  [26, 37, new BABYLON.Vector2(0.625, 0.37), 0.37, Math.PI / 2]
]

goldbergPoly.setGoldbergFaceUVs(uvArray); //无论网格是否可更新，都重置面UV 
goldbergPoly.updateGoldbergFaceUVs(uvArray);//仅当网格可更新时才重置面 UV 

对于极点，五边形用于匹配 uvs。

 5、放置网格

goldbergPoly.placeOnGoldbergFaceAt(mesh, face, position);

位置是相对于面的中心和轴，faceXaxis，faceYaxis 和 faceZaxis，例如在面 32 上放置一个盒子网格

const height = 2;
const width = 0.1;
const depth = 0.08;
const box = BABYLON.MeshBuilder.CreateBox("box",
    { width: width, depth: depth, height: height });
const position = new BABYLON.Vector3(0.53, height / 2, 0.34);
goldbergPoly.placeOnGoldbergFaceAt(box, 32, position);

网格的大小应根据面的大小。要将网格保持在面内， position.x 和 position.z 的值应该在面的±半径 * √3 之间

由于面按以下顺序存储，极点 0 到 11，最接近极点 0 的非共享面，然后是极点 1、极点 2 等，最后是共享面，即与两个或多个极点等距的面，可以使用查找与特定杆相关的面号。

对于极点 0 ≤ k < 12，您可以使用最接近极点 k 的非共享面确定面数

const faceNumb = goldbergPoly.relatedGoldBergFace(k, s);
const faceNumb = goldbergPoly.relatedGoldBergFace(n); 

 尽管 Goldberg 网格是一种非常专业的网格，但 Babylon.js 支持使用标准导出和导入方法导出和导入 Goldberg 网格。

BABYLON.SceneLoader.ImportMeshAsync("", "PATH TO FOLDER",
     "file.babylon").then((result) => {
  const goldbergPoly = result.meshes[0];
});