Exploding sphere

Posted on May 27, 2015

Check out the demo with parameters (the interaction with the sphere doesn't work on mobile)

After spending quite some time using openFrameworks, I decided it was time to learn something new. So I started to learn how to use Three.js and I made a small interactive animated sphere for the first page of my website (Update: it's no longer on the first page but you can still play with it here).

In the initial state, the sphere is animated by small undulations. When the mouse is over the sphere, the undulations stop moving and an explosion appears where the mouse is pointing at, as if time was frozen in the middle of an explosion. When the mouse moves outside, the time rewinds making the explosion disappear.

The explosion effect is made using a vertex shader to displace the faces of the mesh.

Exploding sphere 1

In the demo you can change various parameters, like the shape of the noise or the lighting.

Exploding sphere 2 Exploding sphere 3 Exploding sphere 4 Exploding sphere 5