Hi, i’ve been trying around the Periodic Table with three.js three.js css3d - periodic table (threejs.org)

I somehow struggling to create a cylinder with caps. I would like to fill the element tiles into both top and bottom caps of the cylinder. Is there a solution to do it?

Here is the current look of my cylinder with no caps.

It’s very similar to this topic: Form a circular cylinder by elements - #5 by jaelchua

So, I ask the same thing here: is there any reference/explanatory picture of the desired result?

Hi @prisoner849 , i have tried my best illustrate it. It should look something like this with bottom and top cap filled with element tiles.

If you write one yourself

It’s not three.js specific question. It’s more about how to distribute rectangles in a circle, or how to determine which rectangles of a grid are inside of a circle, thus it’s more about Maths.

Having size of a cell, desired distance between cells, and circle’s radius, you can determine, if a cell is inside of the circle, by checking, that distance from the center of the circle to each cell’s corner is less than circle’s radius.