理解截断的二十面体的几何形状,用于渲染

时间:2013-12-26 18:47:23

标签: javascript graphics three.js geometry

enter image description here

我正在尝试使用Three.js使用可点击区域渲染上面的截断二十面体。

我找到了常规二十面体的代码

var t = ( 1 + Math.sqrt( 5 ) ) / 2;

var vertices = [
    [ -1,  t,  0 ], [  1, t, 0 ], [ -1, -t,  0 ], [  1, -t,  0 ],
    [  0, -1,  t ], [  0, 1, t ], [  0, -1, -t ], [  0,  1, -t ],
    [  t,  0, -1 ], [  t, 0, 1 ], [ -t,  0, -1 ], [ -t,  0,  1 ]
];

var faces = [
    [ 0, 11,  5 ], [ 0,  5,  1 ], [  0,  1,  7 ], [  0,  7, 10 ], [  0, 10, 11 ],
    [ 1,  5,  9 ], [ 5, 11,  4 ], [ 11, 10,  2 ], [ 10,  7,  6 ], [  7,  1,  8 ],
    [ 3,  9,  4 ], [ 3,  4,  2 ], [  3,  2,  6 ], [  3,  6,  8 ], [  3,  8,  9 ],
    [ 4,  9,  5 ], [ 2,  4, 11 ], [  6,  2, 10 ], [  8,  6,  7 ], [  9,  8,  1 ]
];

THREE.PolyhedronGeometry.call( this, vertices, faces, radius, detail );

并得出结论t is φ& vertices包含以下所有排列:

(0, ±1, ±φ) (±1, ±φ, 0) (±φ, 0, ±1) - 来自Here

所以我修改了我的顶点:

(0, ±1, ±3φ) (±2, ±(1+2φ), ±φ) (±1, ±(2+φ), ±2φ) - 来自Here

导致:

var vertices = [
        [-2, (1+2*t,t], [2,(1+2*t), t ], [-2,-(1+2*t),-t], [2,-(1+2*t),-t ],
        [0,-1,3*t], [0,1,3*t], [0,-1,-3*t], [0,1,-3*t],
        [1,-(2+t),-2*t ],[1,(2+t),2*t],[-1,-(2+t),-2*t],[-1,(2+t),2*t]
];

现在我明白我必须修改faces。二十面体似乎有20个三角形面孔和我可以在Three.js中用三角形构造任何多边形。

接下来,我需要5个五边形和5个坐标的坐标。以下形式的12个六边形:

5 * 12 + 6 * 20 = 180个三角形

如果是这样,我应该如何继续生成这些坐标?或者即使我对整件事情都不对。

1 个答案:

答案 0 :(得分:2)

JSModeler框架可以生成很多实体,包括截断的二十面体,所以源可以帮助你。

如果找到GenerateTruncatedIcosahedron,可以在此处找到代码: https://github.com/kovacsv/JSModeler/blob/master/src/extras/solidgenerator.js

代码创建了具有五个和六个顶点的多边形,但很容易用三角形替换它们。