使用 Three.js 生成正多边形

Question

我正在使用 Three.js 根据用户提供的边数以程序方式生成常规 N-gon。长期目标是将此作为渲染多面体棱镜的第一步。

我正在使用here 讨论的解决方案来计算 N-gon 的顶点。

然后我使用here 讨论的技术在N-gon 上生成人脸。

我第一次尝试生成必要的 Geometry 对象导致以下结果，在添加到 Mesh 后似乎没有渲染任何内容：

function createGeometry (n, circumradius) {

    var geometry = new THREE.Geometry(),
        vertices = [],
        faces = [],
        x;

    // Generate the vertices of the n-gon.
    for (x = 1; x <= n; x++) {
        geometry.vertices.push(new THREE.Vector3(
            circumradius * Math.sin((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
            circumradius * Math.cos((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
            0
        ));
    }

    // Generate the faces of the n-gon.
    for (x = 0; x < n-2; x++) {
        geometry.faces.push(new THREE.Face3(0, x + 1, x + 2));
    }

    geometry.computeBoundingSphere();

    return geometry;
}

在玩了太久之后，我发现了 ShapeGeometry 类。这使用了与上例相同的顶点算法，但这个算法在添加到 Mesh 后会正确渲染：

function createShapeGeometry (n, circumradius) {

    var shape = new THREE.Shape(),
        vertices = [],
        x;

    // Calculate the vertices of the n-gon.                 
    for (x = 1; x <= sides; x++) {
        vertices.push([
            circumradius * Math.sin((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
            circumradius * Math.cos((Math.PI / n) + (x * ((2 * Math.PI)/ n)))
        ]);
    }

    // Start at the last vertex.                
    shape.moveTo.apply(shape, vertices[sides - 1]);

    // Connect each vertex to the next in sequential order.
    for (x = 0; x < n; x++) {
        shape.lineTo.apply(shape, vertices[x]);
    }

    // It's shape and bake... and I helped!         
    return new THREE.ShapeGeometry(shape);
}

使用 ShapeGeometry 示例解决的 Geometry 示例有什么问题？

我认为这不是相机或定位的问题，因为用更简单的整数替换复杂的顶点计算会产生一个没有问题的多边形，前提是这些值有意义。

我问的原因是，正如我最初提到的，我希望最终将其用作渲染多面体的第一步。可以拉伸 ShapeGeometry 对象以赋予它们深度，但即使使用 Three.js 提供的选项，从长远来看，这可能还不足以满足我的需求，因为所需的多面体变得更加不规则。

有什么想法吗？

Answer 1

您可以使用 THREE.CylinderGeometry 创建棱镜；对于 n 面棱镜，您可以使用

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
var nPrism = new THREE.CylinderGeometry( 30, 30, 80, n, 4 );

您还可以使用 CylinderGeometry 来创建金字塔和平截头体；有关内置形状的更多示例，您可以查看：

http://stemkoski.github.io/Three.js/Shapes.html

由于您听起来也可能对更一般的多面体感兴趣，因此您可能还想查看：

http://stemkoski.github.io/Three.js/Polyhedra.html

其中包括柏拉图固体、阿基米德固体、棱镜、反棱镜和约翰逊固体的模型；然而，在那个程序中，多面体是“厚”的，因为使用球体作为顶点，圆柱体作为边。

希望这会有所帮助！

Answer 2

您的功能按预期工作。

看看这个小提琴http://jsfiddle.net/Elephanter/mUah5/

there is a modified threejs fiddle with your createGeometry function

所以你在另一个地方有问题，而不是在 createGeometry 函数