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.

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, as if the time was frozen in the middle of an explosion. When the mouse goes out of the sphere, the time rewinds, making the explosion disappear.

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

In the demo you can change various parameters, like the dependence on the position on the sphere of the noise or the lighting.