了解截断的二十面体的几何图形，以进行渲染 [英] Understanding the geometry of a truncated Icosahedron, for rendering

问题描述

m试图通过使用 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是φ &安培; vertices 由以下所有排列组成：

（0，±1，±φ ） （±1，±φ，0） （±φ，0，±1） - 从 Here

所以我修改了顶点：

（0，±1，±3φ） （±2，±（1 +2φ），±φ） （±1，±（2 +φ），±2φ） - 从 Here

导致：

pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ 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个三角形面孔& I can只在三角形中 Three.js 构造任何多边形。

然后跟随，我需要坐标5个五边形& 12个六角形：

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

如果是这样，我应该如何继续生成这些坐标？或者即使我对整个事情是错误的。JSModeler框架可以生成很多实体，包括截断的二十面体，所以也许源代码可以帮助你。

如果你找到GenerateTruncatedIcosahedron：
https://github.com/kovacsv/JSModeler/blob/master/src/extras/solidgenerator.js

该代码创建了具有五个和六个顶点的多边形，但可以很容易地用三角形替换。

I'm trying to render a truncated icosahedron like above with clickable zones using Three.js.

I found the code for a regular icosahedron

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 );

And drew the conclusion that t is φ & vertices consists of all the permutations of:

(0, ±1, ±φ) (±1, ±φ, 0) (±φ, 0, ±1) - From Here

So I modified my vertices as per:

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

Resulting in:

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]
];

Now I understand I have to modify the faces as well. Icosahedron seems to have 20 triangular faces & I can construct any polygon in Three.js with triangles, only.

Does it then follow, that I need the coordinates for 5 pentagons & 12 hexagons in the form of:

5 * 12 + 6 * 20 = 180 triangles

If so, how should I proceed in generating those coordinates? Or even if I am wrong regarding the whole thing.

解决方案

The JSModeler framework can generate a lot of solids, including truncated icosahedron, so maybe the source can help you.

You can find the code here if you find for GenerateTruncatedIcosahedron: https://github.com/kovacsv/JSModeler/blob/master/src/extras/solidgenerator.js

The code creates polygons with five and six vertices, but it is easy to replace them with triangles.

这篇关于了解截断的二十面体的几何图形，以进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！