I am attempting to create a truncated icosahedron design with interactive clickable areas using Three.js.
Initially, I came across code for a standard 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 );
Upon further analysis, I realized that t is φ and the vertices list encompasses all permutations as follows:
(0, ±1, ±φ) (±1, ±φ, 0) (±φ, 0, ±1) - Derived from Here
To modify my vertices accordingly, I made adjustments based on:
(0, ±1, ±3φ) (±2, ±(1+2φ), ±φ) (±1, ±(2+φ), ±2φ) - Referenced from Here
Which resulted 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]
];
Realizing that the faces must also be modified. An icosahedron comprises 20 triangular faces, therefore constructing any polygon in Three.js involves triangles only.
It appears that I would require coordinates for 5 pentagons and 12 hexagons formatted as:
5 * 12 + 6 * 20 = 180 triangles
If this logic stands correct, what should be my approach in generating these coordinates? Or would there be an alternative perspective worth exploring?