Show sidebar

Line dance

I finally found the time to familiarize myself with Three.js, something I’ve wanted to do for a long time now. This great 3D javascript library seems to get more and more focus, and many impressive projects built upon it seems to pop up on a daily basis lately. It really makes things easy for the developer, who can leverage the power of WebGL without the need to know what goes on under the hood.

This little experiment of mine is nothing too advanced. I wanted to primarily examine the basics of the library, to render out a bunch of items, some custom made geometry, and then animate them on stage. Of course I also had to throw in a particle emitter, which is a simple task thanks to the Sparks library.
A few lines are animated in a fake way, that makes it look as if they moves forward, when in fact each line section just moves one step backwards, to make room for a new front. I created three different heads for the lines, in order to add some variety; an arrow, a sphere and a particle emitter. Clicking anywhere with the mouse makes a line explode, only to be replaced by a new one when it’s gone.

It is possible to adjust a bunch of settings, such as number of lines and their quality, in the setting panel.

› Open project

line dance 1
line dance 2
line dance 3
line dance 4
line dance 5