This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.laser. threex.laser is a threex game extension for three.js. It provides a laser beam effect. Excellent to add in your space game! The laser itself is fully procedural with generated texture. The bleeding effect is obtained with additive blending. threex.laser contains a more elaborate laser which dynamically collides with your scene. It is all done for you and it looks great! On impact, there is a point light and an particle sprite for cooler effects :)

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

examples/demo.html [view source] : It shows a demo with cooked laser impacting a moving torus.

examples/laserbeam.html [view source] : It shows a usage of threex.laserbeam.js, it could be the basis for a light sword for example.

examples/lasercooked.html [view source] : It shows a usage of threex.lasercooked.js. The laser is inside a cube, the cube is filled with toruses positioned at random, and the laser is colliding with other objects.

How To Install It

You can install it via script tag

1 2 <script src= 'threex.laserbeam.js' ></script> <script src= 'threex.lasercooked.js' ></script>

Or you can install with bower, as you wish.

1 bower install threex.laser

How To Use It

threex.laserbeam.js

It is a raw laser beam using dynamic textures. Here is to create the laser beam and add it to the scene.

1 2 var laserBeam = new THREEx . LaserBeam () scene . add ( laserBeam )

threex.lasercooked.js

It is a laser beam with dynamic collision. On impacts, to increase realism, there is sprite and point light. It depends on THREEx.LaserBeam so first create it and add it to the scene

1 2 var laserBeam = new THREEx . LaserBeam () scene . add ( laserBeam )

Then you create the laserCooked based on it. Don’t forget to update it in your render loop.