Adding Detail - Game Development with Three.js - page 70

Particle systems
Particle systems are a way to create and manage lots of particles at once. They use
geometry to place a particle on each vertex. This has the benefit that you can use
built-in tools we've already seen to manipulate the geometry. For example, you can
use a particle system with imported animated geometry. However, they also have
several limitations. First, creating dynamic effects can be difficult because you have
to code them manually, for example by updating the velocity of each individual
particle in each frame. Second, you can't add and remove particles (although you
can set their opacity to zero), so you have to pre-allocate as many particles as you
might need. Third, you can only use a single material per particle system, so all the
particles in a given system will have the same image, size, and rotation (though you
can independently change their color).
For the purposes of our CTF game, we'll create a celebratory particle system when
we create our flags:
var geometry = new THREE.IcosahedronGeometry(200, 2);
var mat = new THREE.ParticleBasicMaterial({
color: type === 'R' ? TEAMS.R.color : TEAMS.B.color,
size: 10,
});
var system = new THREE.ParticleSystem(geometry, mat);
system.sortParticles = true;
system.position.set(x, VERTICAL_UNIT * 0.5, z);
scene.add(system);
This will create small particles in a roughly spherical shape around the flag we're
initializing. The sortParticles property indicates whether particles should be
sorted by depth so that particles closer to the camera appear in front of those that
are farther away. Sometimes sorting particles can create a strange popping effect
when particles are moving and overlapping, so you may want to test and see what
looks better to you. Additionally, enabling sorting when you have many thousands
of particles can be computationally expensive, though it should be fine with the few
hundred particles in our example.
To complete the effect, we actually want to make the system invisible with system.
visible = false , then temporarily make it visible when a flag is captured later.
Also, our particles will also be more interesting if they move around. We can rotate
the whole particle system by changing its rotation vector:
system.rotation.y += delta * 1.5;