Question

我正在使用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 by Ctrl + F - ＆gt; 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有一些简单的方法吗？

Answer 1

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

修改

现在可以创建自定义形状。

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

Answer 2

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

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

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

<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

如何在Babylon.js中创建自定义网格？

2 个答案:

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