From the course: Learning 3D Graphics on the Web with Three.js

Particle system from geometry - JavaScript Tutorial

From the course: Learning 3D Graphics on the Web with Three.js

Start my 1-month free trial Buy for my team

Particle system from geometry

“

- [Instructor] This is the particle system we have from the previous example. In the previous example, we have created an empty geometry, a geometry that doesn't initially contain any vertices, and populated it with vertices ourselves in a manual manner. We can actually be using an existing geometry to see the particle system as well. Let's see how we will do that. First, we will get rid of the empty, previous geometry that we have created and the animations that are for that. So here, I will be deleting this line that is creating an empty geometry. I will be deleting this section as well, which populates the geometry with particles. And I will delete the animations for this particle system too. Instead, as a particle geometry, I will be using a SphereGeometry object. So here, I will again be creating a variable called particleGeo, and I will be using a Three.js SphereGeometry for this object. So I will be using the values 10 for the radius, 32 and 32 for the width and the height segments. And another change that I will be doing is I will be moving my camera a little bit further back to be able to see this particle system a little bit better. And I will be decreasing the particle size a little bit, maybe make it 0.25. Let's take a look at our scene. Great, now we have an object that is made up of particles. I will also add a bit of a randomization to the initial positions of the vertices because things are looking a bit too orderly right now. So what we can do is, let's go back to the scene file, we can select a particleGeo vertices, and I will be using a forEach method on the vertices to be able to adjust the initial position of the vertices. So I will adjust the positions by using a Math.random function. And again, I will be subtracting 0.5 from the Math.random function so that it can have a range in between minus 0.5 and .5. And I will be doing the same for all the directions actually, for y and z. Let's take a look at our scene. Cool, things are working. When using a built-in perimeter geometry to build your particle system, you can simply increase the number of segments of the underlying geometry to be able to get more particles. So let's try that. We are currently using 32 as the number of segments for this geometry. I will double that value to 64. So here, in my scene file, I will be making these values 64 to see how that's going to look. Great, now we are getting more particles. Also, we are not constrained to using built-in perimeter geometries to create this kind of particle system. An external geometry can be source of a particle system as well.

Contents