Three.js Particle Stars

‹prev | My Chain | next›

Up tonight, I plan to add a star field to the background of my Three.js / Physijs tilt-a-board game.

I think that the Three.js ParticleSystem is the way to go for this.

    // Starfield    
    var stars = new THREE.Geometry();
    for (var i=0; i<1000; i++) {
      stars.vertices.push(new THREE.Vector3(
        1e3 * Math.random() - 5e2,
        1e3 * Math.random() - 5e2,
        -1e2
      ));
    }
    var star_stuff = new THREE.ParticleBasicMaterial();
    var star_system = new THREE.ParticleSystem(stars, star_stuff);
    scene.add(star_system);

A particle field gets a single geometry with as many vertices as I want points. In this case, I add 1000 vertices to create 1000 stars in the background. I randomize the x & y coordinates throughout the field within ±500 of the origin. For the z position, I just put the stars really far away. Lastly, I use a basic particle material. If I do not do so, then the ParticleSystem will choose its own color—and it seems to favor a color that is hard to see against the black of space.

With that, I have my space-age tilt-a-board game:

That turned out to be surprisingly easy to get started with. For some reason particles seemed much harder to grasp until I actually tried it.


Day #317