Rotating Pixie Dust in Three.js

‹prev | My Chain | next›

I have a reasonably nifty looking Three.js / Physijs tilt-a-board game, now complete with a starry background:

I used a Three.js particle system for the starry background, which was my first experience with the particles. Tonight, I would like to see if I can use particles to make some "pixie dust" around the goal (the center of the tilt-a-platform).

I try adding a dust "system" in a randomly dispersed cylinder:

    var pixies = new THREE.Geometry();
    for (var i=0; i<200; i++) {
      var angle = 2*Math.PI * Math.random();
      pixies.vertices.push(new THREE.Vector3(
        25*Math.cos(angle),
        200*Math.random()-100,
        25*Math.sin(angle)
      ));
    }
    var pixie_shape = new THREE.ParticleBasicMaterial({color: 0x009900});
    var pixie_dust = new THREE.ParticleSystem(pixies, pixie_shape);
    scene.add(pixie_dust);

This results in a not entirely satisfactory look:

I think I might want to switch to plain-old particles rather than a particle system to achieve my desired effect. But for tonight, I will end by rotating the entire pixie dust system with every game step:

  function gameStep() {  
    if (ball.position.y < -100) resetBall();
    
    pixie_dust.rotation.set(0, pixie_dust.rotation.y + 0.01, 0);
    
    setTimeout(gameStep, 1000 / 60); // process the game logic
                                    // at a target 60 FPS.    
  } 

That actually looks somewhat nice-ish. As I said, I will probably mess with regular particles tomorrow. Unless something else distracts me.


Day #518