Understanding the geometry of a truncated Icosahedron, for rendering - javascript

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.

Related

How can I make what I want array

I'm a student who has just studied javaScript.
I'm trying to solve an algorithm problem, but I can't solve the problem.
just simple Q ... but I couldn't solve the problem.
[ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ]
please advice me How should make it what I want array
I need to turn a 2D array into a 1D array.
result i want [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ]
I've tried to do many thing.
At first I thought it would be easy , but I couldn't.
I tried many methods, but I didn't get the result.
let a = [ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ]
a.toString().split('').join('')
let result = [];
result.push(a) // [ '1,2', '1,3', '2,1', '2,3' ] // string
How can I get the results [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ]?
This is the closest result I get :
let a = [ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ]
let res = '';
a.forEach(b => {
res += `[${b}],`
});
console.log(res); // [1,2],[1,3],[2,1],[2,3],[3,1],[3,2],
I hope I helped !
Update
To answer OP from the comments below :
let a = [ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3,2 ] ]
let res = a.map(cell => cell = +cell.join(''))
console.log(res); // [12, 13, 21, 23, 31, 32]
.map() : see the MDN docs here
On the first call cell will be [ 1, 2 ]. Using .join('') on it will result in "12". Having a + sign before the .join('') call will parse the result in number.
I hope I explained the process well :)
I am trying to understand what you mean here, but i believe what you want is this
let a = [ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ];
let arr = [];
for (i=0;i<a.length;++i){
var toTXT = a[i][0]+","+a[i][1];
arr[i] = toTXT;
}
console.log(arr) // (6) ['1,2', '1,3', '2,1', '2,3', '3,1', '3,2']
const arr = [ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ];
let newArr = [];
for(let a of arr){
for(let b of a){
newArr.push(b);
}
}
console.log( newArr ); // this is 1 dimensional array.
/*
your request :
[ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ]
that was an invalid sintax. you cant.
the valid one is :
[ [ 1, 2 ], [ 1, 3 ], [ 2, 1 ], [ 2, 3 ], [ 3, 1 ], [ 3, 2 ] ];
*/

How to get triangles for AABB verts?

I am trying to render cubes to represent AABB's. In order to do this I need the vertices of the cube and the 'cells', or triangles. I have AABB structures that look like [vec3Min, vec3Max]. I am able to get the
8 vertices for the cube using the following
export function vertsFromAABB(aabb){
const min = aabb[0];
const max = aabb[1];
return [
// min Y axis verts
min,
[max[0],min[1],min[2]],
[max[0],min[1],max[2]],
[min[1],min[1],max[2]],
// max Y axis verts
max,
[min[0],max[1],max[2]],
[min[0],max[1],min[0]],
[max[0],max[1],min[0]]
];
}
I now need to get the triangle indexes from this set of vertices. The cells should be an array of vertex indicies eg [[0,1,2],[1,2,3], ...]
EDIT UPDATE
I have made the fixes to the last 2 verts that was suggested in the comments. I have a function inprogress for the cells that looks like
export function cellsFromAABBVerts(aabbVerts){
return [
// Top quad triangles
[0,1,2],
[1,2,3],
// Side?
[2,3,4],
[3,4,5],
// Bottom quad triangles
[4,5,6],
[5,6,7],
];
}
If you visualize your cuboid, like this:
then it is pretty straight-forward to derive the triangle indices:
[
[ 0, 1, 2 ],
[ 0, 2, 3 ],
[ 6, 5, 4 ],
[ 6, 4, 7 ],
[ 1, 7, 4 ],
[ 1, 4, 2 ],
[ 0, 3, 5 ],
[ 0, 5, 6 ],
[ 0, 6, 7 ],
[ 0, 7, 1 ],
[ 2, 4, 5 ],
[ 2, 5, 3 ]
]

Flatten array to 1 line

Hey I need some help here in javascript
[ [ 0, 0, 0, -8.5, 28, 8.5 ],
[ 1, 1, -3, 0, 3, 12 ],
[ 2, 2, -0.5, 0, 0.5, 5.333333333333333 ] ]
I want that array above to be in the form of this
0 0 0 -8.5 28 8.5, 1 1 -3 0 3 12, 2 2 -0.5 0 0.5 5.333333333333333
concat and reduce is placing a comma after each value
You can do it simply using Array.prototype.map() & Array.prototype.join()
Example:
var myArr = [ [ 0, 0, 0, -8.5, 28, 8.5 ],
[ 1, 1, -3, 0, 3, 12 ],
[ 2, 2, -0.5, 0, 0.5, 5.333333333333333 ] ];
var str = myArr.map(insideArr => insideArr.join(" ")).join();
console.log(str);
arr.map(item => item.join(' ')).join(',');
This question can be answered in 2 steps. First, flatten out the array using the Array.prototype.reduce() higher order function with the spread operator (...). Then, use the Array.prototype.join() method to convert the flattened array into a list of numbers.
const arr = [ [ 0, 0, 0, -8.5, 28, 8.5 ],
[ 1, 1, -3, 0, 3, 12 ],
[ 2, 2, -0.5, 0, 0.5, 5.333333333333333 ] ];
const flatten = arr.reduce((combine, item) => [...combine, ...item], [])
.join(' ');

Regex to match unquoted strings but not numbers in CSV

Trying to write a regex for my text editor (BBEdit) to encode strings that are not already quoted within an almost correctly syntaxed JSON style object so that I can use within a JavaScript context that would otherwise see these text strings as undefined variables.
Thus :
[ 0, 0, Header, 1, 17, 480 ],
[ 1, 0, Start_track ],
[ 1, 0, Title_t, "Dance of the knights (Romeo & Juliet)" ],
[ 1, 0, Tempo, 600000 ],
[ 1, 0, Time_signature, 4, 2, 24, 8 ],
[ 1, 0, Key_signature, 1, "major" ]
would become:
[ 0, 0, "Header", 1, 17, 480 ],
[ 1, 0, "Start_track" ],
[ 1, 0, "Title_t", "Dance of the knights (Romeo & Juliet)" ],
[ 1, 0, "Tempo", 600000 ],
[ 1, 0, "Time_signature", 4, 2, 24, 8 ],
[ 1, 0, "Key_signature", 1, "major" ]
You could use the below regex.
([\[,]\s*)([A-Za-z_]\S*)(?=,|\s*\])
And then replace the match with $1"$2"
DEMO
Example:
> var s = '[ 1, 0, Title_t, "Dance of the knights (Romeo & Juliet)" ],';
> s.replace(/([\[,]\s*)([A-Za-z_]\S*)(?=,|\s*\])/g, '$1"$2"')
'[ 1, 0, "Title_t", "Dance of the knights (Romeo & Juliet)" ],'

BufferGeometry offsets and indices

I was just wondering for a while now what exactly "offsets" and "indices / index" are. Offsets are e.g. mentioned in https://github.com/mrdoob/three.js/blob/dev/src/core/BufferGeometry.js and indices were mentioned in IndexedGeometry, however I can't currently find it anymore in the dev tree.
Although indices seem rather obvious and although I could dive into the code to figure out some maybe-correct answer for myself I'd love to hear an "official" statement :)
Thanks!
There are two ways to defining geometries:
Non-Indexed
"vertices": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, ... ],
"normals": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, ... ]
In this mode every triangle position is as defined and you can't reuse data.
triangle 0: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
Indexed
"indices": [ 0, 1, 2, ... ],
"vertices": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, ... ],
"normals": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, ... ]
In this mode, indices define the order of the data. The first triangle is using indices 0, 1, and 2. These indices will be used to fetch the vertices and normals data:
triangle 0: [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]
The main benefit of indexed is the possibility of reusing data and uploading less data to the GPU:
"indices": [ 0, 0, 0, ... ],
"vertices": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, ... ]
triangle 0: [ 0, 1, 2, 0, 1, 2, 0, 1, 2 ]
As per offsets...
With offsets you can render specific ranges of your geometry. Instead of drawing from triangle 0 to triangle.length, you can draw from triangle 200 to triangle 400.

Categories

Resources