5

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

我正在使用此处讨论的解决方案来计算N边形的顶点。

然后，我使用此处讨论的技术在N边形上生成面。

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

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 提供的选项，从长远来看，这可能还不足以满足我的需求，因为所需的多面体变得更加不规则。

有什么想法吗？

4

2 回答 2

5

您可以使用 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

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

希望这可以帮助！

于 2013-08-29T17:58:48.430 回答
2

您的功能按预期工作。

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

there is a modified threejs fiddle with your createGeometry function

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

于 2013-08-29T16:17:27.020 回答