Particles vs Particle Systems in Three.js

‹prev | My Chain | next›

Up tonight, I hope to figure out what the difference is between a particle system and a particle in Three.js. On the surface, I would hazard a guess that a particle system is comprised of lots of individual particles (I'm good at deductive reasoning like that), but what might I be able to do with a bunch of individual particles that I cannot do with a particle system?

To answer that, I create a new, blank project in Mr Doob's Code Editor. In there, I add a particle:

  var wrapper = new THREE.ParticleBasicMaterial({size: 100});
  var particle = new THREE.Particle(wrapper);
  particle.position.set(0,0,400);
  scene.add(particle);

Particle systems require a geometry to specify where the individual particles are. Single particles only require a material—the position can be set directly on the particle. Except...

That does not work. I do not see the particle at all and I cannot figure out why.

I am able to create a particle system with a single particle using the same material:

  var points = new THREE.Geometry();
  points.vertices.push(new THREE.Vector3(0, 0, 400));
  var monsters = new THREE.ParticleSystem(points, wrapper);
  scene.add(monsters);

Eventually, I happen across a bug that was wondering the same thing. It turns out that particles are for the canvas renderer only. If I switch the renderer:

var renderer = new THREE.CanvasRenderer();

Then I can even load my fruit monster image as the particle's texture:

  var wrapper = new THREE.ParticleBasicMaterial({
    size: 10,
    color: 0xFFFFFF,
    map: THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png'),
    transparent: true
  });
  var particle = new THREE.Particle(wrapper);
  particle.position.set(0,0,40);
  scene.add(particle);

With that, I see my fruit monster "particle":

It seems from the same bug that particles are going away (to be renamed Sprites). That was a bit confusing, but problem solved.

As for the particle system, I have a good deal of difficulty getting the image to show. I keep seeing nothing but grey squares:

In the end, I find that I have to mark the image texture as needing an update:

  var map = THREE.ImageUtils.loadTexture('/images/purple_fruit_monster.png');
  map.needsUpdate=true;
  
  var wrapper = new THREE.ParticleBasicMaterial({
    size: 256,
    map: map,
    transparent: true
  });

  var points = new THREE.Geometry();
  points.vertices.push(new THREE.Vector3(0, 0, 450));
  points.vertices.push(new THREE.Vector3(200, 0, 250));
  points.vertices.push(new THREE.Vector3(-200, 0, 250));
  var monsters = new THREE.ParticleSystem(points, wrapper);
  scene.add(monsters);

Particles proved a little more challenging than expected, but I think I have them sorted out.



Day #519