2

我正在使用 babylonjs 3D WebGL 库。

这是一个很棒的库，但我在 THREE.JS 库中找不到相同的库。

例如，我在数据库中有 2D 多边形，我从中获取多边形数据，然后创建一个自定义网格并拉伸它。

使用 THREE.JS，没有任何问题，我可以添加到一些数组：

...
points.push( new THREE.Vector2( part.x, -part.y ) );
...
var shape = new THREE.Shape( points );
var extrusion = {
    amount: building.height,
    bevelEnabled: false
};
var geometry = new THREE.ExtrudeGeometry( shape, extrusion );
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({
    ambient: 0xbbbbb,
    color: 0xff0000
});
...
scene.add( mesh );

这很简单。如何做到这一点，我找不到。

我在这里只找到了一些信息：

有这样一个例子（来自 msdn 的 Ctrl + F -> You can also create a mesh from a list of vertices and faces）：

var plane = new BABYLON.Mesh(name, scene);

 var indices = [];
 var positions = [];
 var normals = [];
 var uvs = [];

 // Vertices
 var halfSize = size / 2.0;
 positions.push(-halfSize, -halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(0.0, 0.0);

 positions.push(halfSize, -halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(1.0, 0.0);

 positions.push(halfSize, halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(1.0, 1.0);

 positions.push(-halfSize, halfSize, 0);
 normals.push(0, 0, -1.0);
 uvs.push(0.0, 1.0);

 // Indices
 indices.push(0);
 indices.push(1);
 indices.push(2);

 indices.push(0);
 indices.push(2);
 indices.push(3);

 plane.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind);
 plane.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind);
 plane.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind);
 plane.setIndices(indices);

 return plane;

但它与 THREE.JS 不同。例如，我需要在 THREE.JS 中我不需要它的地方手动计算索引缓冲区，它也是一个只有平面的样本，我没有找到任何关于精确挤出的信息。

所以......也许，BabylonJS 中有一些简单的方法？

4

2 回答 2

4

目前不支持挤压，但这可能是一个很棒的添加功能:) 我肯定会将它添加到我们的路线图中。如果您想进一步讨论这个问题，请在babylon.js 论坛上提问。

编辑：

现在有能力创建自定义形状。

http://doc.babylonjs.com/tutorials/parametric_shapes#extrusion

于 2014-10-09T16:58:43.967 回答
0

2019 年更新 PolygonMeshBuilder 允许从顶点集合创建自定义网格

请注意PolygonMeshBuilder使用Earcut，因此，在非游乐场项目中，您必须添加对他们的 cdn 的引用或下载他们的 npm 包

Earcut在您的索引 HTML 中添加为依赖项

<script src="https://preview.babylonjs.com/earcut.min.js"></script>

现在您可以使用 Pramaetric 形状来挤压多边形和打孔。

   //Polygon shape in XoZ plane
    var shape = [ 
                    new BABYLON.Vector3(4, 0, -4), 
                    new BABYLON.Vector3(2, 0, 0), 
                    new BABYLON.Vector3(5, 0, 2), 
                    new BABYLON.Vector3(1, 0, 2), 
                    new BABYLON.Vector3(-5, 0, 5), 
                    new BABYLON.Vector3(-3, 0, 1), 
                    new BABYLON.Vector3(-4, 0, -4), 
                    new BABYLON.Vector3(-2, 0, -3), 
                    new BABYLON.Vector3(2, 0, -3)
              ];

    //Holes in XoZ plane
    var holes = [];
        holes[0] = [ new BABYLON.Vector3(1, 0, -1),
                 new BABYLON.Vector3(1.5, 0, 0),
                 new BABYLON.Vector3(1.4, 0, 1),
                 new BABYLON.Vector3(0.5, 0, 1.5)
               ];
        holes[1] = [ new BABYLON.Vector3(0, 0, -2),
                 new BABYLON.Vector3(0.5, 0, -1),
                 new BABYLON.Vector3(0.4, 0, 0),
                 new BABYLON.Vector3(-1.5, 0, 0.5)
               ];

    var polygon = BABYLON.MeshBuilder.ExtrudePolygon("polygon",{  
      shape:shape, 
      holes:holes,
      depth: 2, 
      sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

结果：

请参阅此操场以供参考：

https://playground.babylonjs.com/#4G18GY#7

提前使用

建筑楼梯：

https://www.babylonjs-playground.com/#RNCYVM#74

于 2019-11-20T14:06:05.097 回答