Icosahedron Geometry

[00:00:00]
>> So, so far we have this kind of noisy sphere, which is looking kinda cool, but it still has this issue here. And so the next thing I wanna try and introduce is another way of dealing with this kind of approach that we're working with. And everything is within this same exercise of trying to create polka dots on a sphere.

[00:00:21]
Which is seemingly something that you would think is easy, but of course in shaders and with WebGL, it gets kind of advanced and kind of complicated. But it's also that there's many, many different ways to achieve this. So the next thing we can do is to think about how do we create this sort of even spacing.

[00:00:43]
And so this is using an icosahedron. And then we're placing spheres on each of these vertices of the triangles and we're using that to render some of these objects. So maybe what we'll try and do is we'll try and remix some of this to work with this kind of look here.

[00:01:07]
So that all the meshes are or the polka dots are evenly spaced. And then, once we do that, we'll just take the same code, and we'll convert that code into a shader. Which will be a little bit more interesting for our purposes because then we can start to manipulate the sizes, manipulate some of the colors in interesting ways.

[00:01:29]
So what I'll do is I'm just gonna take my code and copy paste it again, just so you have a backup, cuz already this demo here could be kinda cool to use for something else. So remember, I'm gonna start with an icosahedron here. And I'm gonna use the vertexes of that ico sphere to create new geometries.

[00:01:51]
And so for my fragment shader, let's just clean this up. And for now let's just make it really simple, let's just make it the color that we put in as the uniform, that's all. The rest of it, let's leave for now. Okay, we're gonna create a new geometry.

[00:02:08]
And this new geometry is gonna be a icosahedron geometry and we're gonna call it baseGeom. And we're gonna say new THREE.IcosahedronGeometry. And the first parameter is the radius. And the second parameter is the detail of this geometry. So how high poly we want it or how low poly we want it.

[00:02:33]
And so we're gonna leave that detail zero. When you put this number in, just be careful not to put big numbers. If you put an icosahedron with 10 as the detail or 100, your browser might just freeze or crash, or something like that. So, I've created this. And now the reason we're using this icosahedron is just to get the points.

[00:02:55]
We're not trying to render this icosahedron, we're just trying to get the points of the icosahedron. So I'm gonna get those points, I'm gonna say, points = baseGeom.vertices. And now we have a list of the vector three points, so I could console log that just to see, just to confirm.

[00:03:20]
And it's indeed these vector threes. And so we don't need to make a mesh for this icosahedron cuz we're not gonna render it. But instead we're going to render little tiny circles at each of these points. So we're gonna say, points.forEach, so we have the point. And for each of these points, we're gonna create a new mesh.

[00:03:52]
So we're gonna create a mesh. Gonna say const mesh = new THREE.mesh. And this we can use for now, we can use the same sphere geometry, just to test it out. And we can use a mesh basic material that might be a different color, a bright red or something, a different color than our circles colored.

[00:04:19]
And maybe use wireframe: true just to debug it. And this last thing here is just to add this mesh to the scene. And so what our goal is, is to have it so that each of these points in our icosahedron. At each of those points we wanna draw another little mesh, a little tiny object of some kind.

[00:04:50]
And to do that we are gonna write this out like this, but then also we are going to position each of these measures at the same position as the icosahedron's point. So we are gonna say mesh.position.copy(point). And what we are doing now is we are saying for each of the points in the icosahedron, place a new mesh at that position.

[00:05:13]
Which actually looks kind of cool. Not exactly where we want. But if we scale down these meshes, so we say mesh.scale.setScalar down to some very small number. All of a sudden we're gonna see these meshes on the surface of the sphere.