Sharing a Three.js Example – Fireworks

Someone recently asked a question about manipulating the 360-image player in Storyline. That got me looking into Three.js, which Storyline uses to power its player. I’ve started looking into what other effects could be easily integrated into Storyline projects using Three. It’s all very new to me, but I do like a challenge.

I chose a visually appealing example as a test case for integration into a Storyline project. It’s a simple fireworks demo created by Michael Schlachter (https://github.com/manthrax/atos/tree/master) but could have some potential in e-learning projects as a success visual. This would be akin to the many confetti-related posts in the Articulate forums over the years.

It's a basic demo, but I thought I’d share the results with anyone who might want to use it. I’ve attached a sample project that demonstrates its use.

Demo: https://360.articulate.com/review/content/74a1f4c7-467a-4a44-8136-27fdf249ab15/review

This application uses a script on the master to display some fireworks graphics. It loads a customized Three.js library with a few addons included. There are also some sound effect samples. The Three package and the sound clips are loaded via the web object in Scene 2. They’re included in the attached zip file.

I made a few modifications to Michael’s original demo to make it work within the Storyline slides. I disabled rotational display functionality, but you could always add it back in. I left the ability to zoom in and out with the mouse wheel. The UnrealBloom postprocessing effects in Three.js give the atmospheric glow to the fireworks. It’s also a known issue that they do not directly support canvas transparency. There are some workarounds for various versions of Three but getting them to work with a very limited understanding of the library is not very straightforward. I did manage to get it working in this demo, so you are able to overlay the fireworks onto other slide objects, which makes them much more useful.

My implementation inserts a canvas element into either the main slide background or over the background of a shape object, like a rectangle. You can specify where it should attach using the targetTag variable, as shown in the demo.

This is a quick demo, so there are limited comments and bits of sloppy code. There are plenty of areas for expansion and improvement. It includes the core Three library (v170) and only the addons listed in the source files on the Git page. You should be able to use the demo as a template and adapt it for your own uses.

Update: Still can't seem to attach zip files reliably, so here is the link to the web object folder.

Link: https://paedagogus.org/ELH/fw/WO.zip