translation Sequence
Three.js is a great open source WebGL Library, WebGL allows JavaScript to manipulate the GPU, realizing the true meaning of 3D at the browser end. But at present this technology is still in the development stage, the material is extremely scarce, the amateur learns basically to through the demo source code and three.js own source code to study.
0. Introduction
Hi, we've met again. So we have started to learn three.js, if you have not read the previous three tutorials, I suggest you read it first. If you've finished reading the previous tutorial, you might want to do something about particles. Let's face it, everybody loves the particle effect. Whether you know it or not, you can easily create them.
1. Create a particle system
Three.js the particle system as a basic geometry, because it is like a basic geometry, which has a shape, a position, a scaling factor, and a rotational property. The particle system treats every point in the Geometry object as a separate particle. Why did you do that? I think it's based on the following reasons: first, the entire particle is systematically plotted with just one drawing function, not thousands of calls, and second, it allows you to set some global parameters to affect all the particles in your particle system.
Even if the particle system is considered an object of a whole, we can still separate the coloring for each particle, because in the process of drawing the particle system, three.js passes the color of each vertex to the shader through the attribute variable colour. I'm not going to do this in this tutorial, and if you want to know how it's done, you can go to GitHub to see the three.js routines.
Particle systems may also have a special effect that requires your attention: three.js the particle system when it is first rendered, it caches its data, and then you cannot increase or decrease the particles in the system. If you don't want to see a particle, you can set the alpha value in its color to 0, but you can't delete it. So you should think about all the particles that might need to be displayed when you create a particle system.
start creating a particle system that only takes so much：
Copy Code code as follows:
Create a particle geometry
var particlecount = 1800,
particles = new THREE. Geometry (),
Pmaterial =
New THREE. Particlebasicmaterial ({
COLOR:0XFFFFFF,
Size:20
});
To create a single particle in turn
for (var p = 0; p < particlecount; 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)
);
Adding particles to a particle geometry
Particles.vertices.push (particle);
}
Create a particle system
var Particlesystem =
New THREE. Particlesystem (
Particles,
pmaterial);
Adding a particle system to the scene
Scene.addchild (Particlesystem);
If you run：
1. You'll find the particles are square.
2. Particles are not moving
We're going to fix it one at a.
2. Style
When we create a particle base material, we pass in color and size. What we might want to do is to pass in a texture image to display the particles, and that's a good way to control what the particles look like.
As you can see, the particles are drawn in square shapes, so we should also use a square texture picture. In order to look better, I will also use additive blending, but this must ensure that the background of the texture picture is black rather than transparent. I understand the reason is: now additive mixing and transparent material is incompatible. But it doesn't matter, it will look great at last.
Let's update the particle base material and the particle system and add some addition to the transparent particles. If you like, you can also use my particle picture.
Copy Code code as follows:
Create a particle base material
var pmaterial =
New THREE. Particlebasicmaterial ({
COLOR:0XFFFFFF,
SIZE:20,
Map:three. Imageutils.loadtexture (
"Images/particle.png"
),
Blending:three. Additiveblending,
Transparent:true
});
Allow particle systems to sort the particles to achieve the desired effect
Particlesystem.sortparticles = true;
It seems to have been much better. Now let's introduce a little physics to get the particles moving.
3. Introduction of physical
By default, the particle system does not move in three-dimensional space, which is good. But I want them to move, and I'm going to make the particle system move like this: let the particles rotate around the y axis. and the particles range from 250 to 250 in each axis, so rotate around the y axis to think that they rotate around the center of the system.
I also assume that you already have the code for the frame loop somewhere, similar to what I did in the previous tutorial on shaders. So here's what we need to do:
Copy Code code as follows:
Frame loops
function Update () {
Increase the amount of rotation.
PARTICLESYSTEM.ROTATION.Y + 0.01;
To draw a particle system
Renderer.render (scene, camera);
Sets the call to update the next time the frame is refreshed
Requestanimframe (update);
}
Now we begin 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 contains a few steps：
1. Give each particle an initial rate of 0
2. In each frame, assign a random gravitational acceleration to each particle.
3. In each frame, by updating the speed by adding speed, update the position through the speed
4. When a particle moves out of sight, reset the initial position and speed
Sounds a lot, in fact, the code is very little written. First, in the process of creating the particles, we add a horizontal velocity for each particle:
Copy Code code as follows:
Create a horizontal motion 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 needs to be reset when it leaves the bottom of the screen.
Copy Code code as follows:
Frame loops
function Update () {
Increase the amount of rotation
PARTICLESYSTEM.ROTATION.Y + 0.01;
var pcount = Particlecount;
while (pcount--) {
Get a single particle
var particle = Particles.vertices[pcount];
Check if you need to reset
if (PARTICLE.POSITION.Y <-200) {
PARTICLE.POSITION.Y = 200;
PARTICLE.VELOCITY.Y = 0;
}
Update the horizontal velocity component with random number and update the position according to the speed
PARTICLE.VELOCITY.Y-= Math.random () *. 1;
Particle.position.addSelf (
particle.velocity);
}
Tell the particle system we changed the particle position.
Particlesystem.geometry.__dirtyvertices = true;
Draw
Renderer.render (scene, camera);
Sets the next Call
Requestanimframe (update);
}
Not shocking enough, but this particle shows at least how to do it. You should definitely create some wonderful particle effects yourself and then let me know.
Here's a warning. You should know that in the frame loop, I went the other way: I went through all the particles in a loop, which is actually a very extensive approach. If you do too much work in the frame loop (Translator Note: Note that the frame cycle of the JS code is running in the CPU, it is not like the GPU, can be all of a sudden with thousands of simple processes), the browser will be Kaka, in fact, if you use the Requestanimationframe, It views the refresh 60 times per second. So it's better to optimize your code and do as few things as possible in the frame loop.
4. Summary
The particle effect is great, it's the individual who loves the particle effect, and now you know how to add the particle effect to the three.js. I hope you can use it well, just like before!
Again, here is the source download, and, let me know you like it!
