Published: 25th Feb 2016

Great Things Come in ThreeJS

Head of Technology, Matt talks about how JavaScript library Three.js has revolutionised web animation.

Matt Sutherland - Head of Technology

Over the lifetime of the web we’ve made great strides forward with what’s achievable in a browser.

When something extremely complex is achieved, we often see a pattern where, over time, that extremely complex thing becomes dramatically easier to achieve. At the same time, it also becomes more accessible, more polished and more impressive.

In the case of animation, there have been many ways that we developers have been able to create animated objects on the web. Yet it is only really since the WebGL specification was created in 2011 that we’ve seen animation on the web follow the trend and become easier to achieve, whilst becoming more accessible, polished and impressive.

One of the major reasons behind this is the creation of Three.js - a JavaScript library that enables developers without particular 3D skills to create some of the most impressive animations you see on the web today.

Now anyone who is familiar with Codepen.io (a sharing platform for developers) can probably vouch for the sheer volume of Three.js projects out, there but I thought I would share a few of my favourites.

Karim Maaloul has made some awesome low-fi 3D code pens that include the viral ‘Chill the Lion’, the fantastic ‘Three Little Birds’ and ‘Tree Generator’.

More complex examples can be found with the doughnut-inspired interactive film ‘The Dilla Dimension’ - Charlie Walter’s controllable BB8 is a must-see for any fan of the new Star Wars film.

More experimental examples can also be found, including this Horse Stampede and this interactive music concept for ‘Galvanize’.

Many great teams across the web are utilising the Three.js library and we at True are no different. In fact, as part of our own recent redesign for the True site, Three.js was used to achieve moving particles. You can see them in action on our homepage and on some of our key case studies for Fuller’sPet Drugs Online and Furniture Village.

If you'd like to find out more about Three.js please do get in touch.