THREE. JS getting started tutorial (4) Creating a Particle System

Translation
Three. js is a great open-source WebGL library. WebGL allows JavaScript to operate on GPUs and implement 3D in the browser. However, this technology is still in its development stage, and there is a shortage of materials. Fans should learn it through the Demo source code and the source code of Three. js.
0. Introduction
Hi, we met again. So we have started to learn Three. js. If you haven't read the previous Three tutorials, we suggest you read them first. If you have read the previous tutorial, you may want to do something about particles. Let's face this topic. Everyone loves the particle effect. Whether you know it or not, you can easily create them.
1. Create a Particle System
Three. js regards the particle system as a basic ry because it is like a basic ry with shapes, positions, scaling factors, and rotation attributes. The particle system regards each point in the geometry object as a separate particle. Why? I would like to consider the following reasons: first, the whole particle system only needs to call a rendering function once, rather than calling a function thousands of times. Second, this allows you to set global parameters to influence all particles in your particle system.

Even if the particle system is regarded as a whole object, we can still color each particle separately, because Three is used to plot the particle system. js uses the attribute variable color to pass the color of each vertex to the shader. I am not going to do this in this tutorial. If you want to know how this is done, you can go to GitHub to check Three. js routines.

Particle systems may also have a special effect that needs to be noticed: Three. when js is rendered for the first time, it will cache its data, and you will not be able to add or reduce particles in the system. If you do not want to see a particle, you can set the alpha value in its color to 0, but you cannot delete it. Therefore, when creating a particle system, you should consider all the particles that may need to be displayed.
To create a particle system, you only need so many:
Copy codeThe Code is as follows:
// Create a Particle geometry
Var participant COUNT = 1800,
Participant = new THREE. Geometry (),
PMaterial =
New THREE. Fig ({
Color: 0 xFFFFFF,
Size: 20
});
// Create a single particle in sequence
For (var p = 0; p <particle count; p ++ ){
// The Particle range is between-250 and 250.
Var pX = Math. random () * 500-250,
PY = Math. random () * 500-250,
PZ = Math. random () * 500-250,
Particle = new THREE. Vertex (
New THREE. Vector3 (pX, pY, pZ)
);
// Add the particle to the particle geometry
Participant. vertices. push (particle );
}
// Create a Particle System
Var participant system =
New THREE. participant system (
Participant,
PMaterial );
// Add the particle system to the scenario
Scene. addChild (participant system );

If you run:
1. You will find that all particles are square
2. particles do not move
One by one.
2. Style
We introduced color and size when creating a particle base material. What we might want to do is to input a texture image to show the particles, so that we can well control the style of the particles.

As you can see, particles are drawn in the shape of squares, so we should also use a square texture image. To make it look better, I will also use addition and mixing, but in doing so, we must ensure that the background of the texture image is black rather than transparent. The reason I understand is: The addition and mixing are not compatible with transparent materials. But it doesn't matter. It looks great in the end.

Let's update the basic material and system of the particle, and add some transparent particles under addition mixing. If you like, you can also use my particle image.
Copy codeThe Code is as follows:
// Create the basic particle material
Var pMaterial =
New THREE. Fig ({
Color: 0 xFFFFFF,
Size: 20,
Map: THREE. ImageUtils. loadTexture (
"Images/fig"
),
Blending: THREE. AdditiveBlending,
Transparent: true
});
// Allows the particle system to sort the particles to achieve the desired effect.
Particle System. sortparticipant = true;

This looks much better. Now let's introduce a little physics to let the particles move.
3. Introduce physical
By default, the particle system does not move in 3D space, which is good. But I want them to move, and I want the particle system to do this: let the particles rotate around the Y axis. In addition, the range of particles in each axis is between-250 and 250, so they rotate around the Y axis to make them rotate around the center of the system.

I also assume that you already have the frame loop code somewhere, which is similar to the one I used in the previous tutorial on the shader. So here we only need to do this:
Copy codeThe Code is as follows:
// Frame loop
Function update (){
// Increase the rotation volume by a bit
Particle System. rotation. y + = 0.01;
// Draw the Particle System
Renderer. render (scene, camera );
// Set the call to update when the next frame is refreshed
RequestAnimFrame (update );
}

Now we start to define the motion of a single particle (the previous rotation is the motion of the entire particle system ). Let's make a simple rain effect,This includes a few steps:
1. assign an initial 0 speed to each particle
2. Assign random gravity acceleration to each particle in each frame
3. In each frame, the position is updated through acceleration and speed.
4. When a particle moves out of sight, reset the initial position and speed.
It sounds a lot, but the code is rarely written. First, we add a horizontal speed for each particle during particle creation:
Copy codeThe Code is as follows:
// Create a horizontal velocity for each particle
Particle. velocity = new THREE. Vector3 (
0, // x
-Math. random (), // y: random Number
0); // z

Next, we pass each particle in the frame buffer and reset its position and speed when the particle leaves the bottom of the screen and needs to be reset.
Copy codeThe Code is as follows:
// Frame loop
Function update (){
// Increase the rotation volume
Particle System. rotation. y + = 0.01;
Var pCount = maid;
While (pCount --){
// Obtain a single particle
Var particle = maid. vertices [pCount];
// Check whether a reset is required
If (particle. position. y <-200 ){
Particle. position. y = 200;
Particle. velocity. y = 0;
}
// Update the horizontal speed component with a random number and update the position based on the speed
Particle. velocity. y-= Math. random () *. 1;
Particle. position. addSelf (
Particle. velocity );
}
// Tell the particle system that we have changed the position of the particle
Particle System. geometry. _ dirtyVertices = true;
// Draw
Renderer. render (scene, camera );
// Set the next call
RequestAnimFrame (update );
}

Although not shocking enough, this particle at least shows how to do it. You should create some wonderful particle effects on your own and let me know.
Here is a warning you should know that in the frame loop, I stepped into the refresh pool: I traversed all the particles in a loop, which is actually a very rough way. If you have done too much work in the frame loop (Note: The js Code of the frame loop runs in the cpu, it is not like gpu, the browser will get stuck. In fact, if you use requestAnimationFrame, the view will be refreshed 60 times per second. So optimize your code and do as few things as possible in the frame loop.
4. Summary
The particle effect is amazing. I love the particle effect personally, but now you know how to add the particle effect to Three. js. I hope you can use it as well, just like before!
Similarly, the source code is downloaded here, and, let me know that you like it!