使用Three.js生成规则多边形

Question

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

我使用这里讨论的解决方案来计算N-多边形的顶点。

然后，我使用这里讨论的技术在N-gon上生成面。

我第一次尝试生成必要的几何体对象，结果如下，添加到网格后似乎不会渲染任何内容：

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类。这使用了与上面的例子相同的顶点算法，但这一个在添加到网格后正确渲染：

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示例解决的几何体示例有什么问题？

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

我之所以这么问是因为，正如我最初提到的，我最终想把它作为渲染多面体的第一步。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函数