Star Wars Earth-Sploder!

Use your mouse to protect us from the parallel-universe invasion!
(Warning: has sound- make sure your speakers aren't too loud :)


This was inspired by playing with the Threejs Raycaster feature, which is naturally illustrated using laser beams.

Three.js PointLight

One important effect is that the laser beams emit light.
This was accomplished by adding a PointLight to each laser mesh, which travels with the laser beam.
The light is added as a child of the laser, so that it follows the translation of the beam.
One caveat is that lights can't be dynamically added or subtracted from the scene without recompiling the shader code. [See explanation here]
So I pre-allocated the lasers and lights, with the intensity set to 0.
Each time a new laser is fired, the program searches through the array of lasers to find the first available laser/light, and sets its position and direction.
When a laser goes past the far clipping plane, or hits a planet, it is released and becomes available again.
The maximum number of lasers is related to the max mouse-clicking rate, and to the velocity of the lasers. Currently, 16 lasers are available, but with the current velocity (1000), it is rare to go above 10 (may be hardware/mouse dependent).


The Three.js Raycaster allows you to shoot a ray from a given point in a given direction, and check for collisions with objects if wanted.
The Raycaster is used in two ways here: first, it is used to project a ray from the camera position to the mouse vector, in order to aim the laser.
This direction is stored with the laser, and the beam mesh is animated along the ray until it either hits a planet or goes out of view.

The Raycaster is also used to detect collisions between the lasers and the planets.
On each frame, a ray is projected from the laser position, in the same direction as the laser, to detect if it hits a planet.
The range of this ray is adjusted to avoid missing, since the laser travels in discrete steps.
Too long of a range would make the planet disappear before the beam hits it, but too short of a range would cause the initial ray to fall short of the planet,
but on the next frame the ray might go past the planet, and the ray would miss the planet.

Material & Texture Mapping

This tutorial is very helpful.
The planets have a Phong material so that they reflect the lights from the lasers.
The texture is simply provided by an image which is wrapped around the sphere.

To Do:

-fix hit counter to only count once per intersection
-fix hits that are counted but not disappearing the planets
-respawn planets that go outside camera view

References & Resources

Raycasting & Collision Detection
Threejs Texture Mapping Tutorial
Planet Pixel Emporium- Planet Texture Maps
Laser Sound, via