Continuing with our focus on modern web animation and 3D graphics, this month we are looking at three.js in more detail.

What is three.js?

Anything with a .js extension is going to relate to Javascript; this is a Javascript library and API that has cross-browser compatibility and can be used to create 3D computer graphics using WebGL. Using three.js allows developers to use Javascript as an integral part of a website, without any reliance on third party browser plugins. The source code for three.js is hosted on GitHub and is updated regularly.

Using three.js makes working with WebGL much easier as it condenses the code required down by using pre-built components and helper methods to make the work faster and simpler with the same end result. It isn’t the only library that does this, but it is one of the easiest to work with.

What can be done with three.js?

Three.js allows for a wide range of features, not just animation although this plays a large part in the popularity of this library, but also this list, which is not limited to, but includes:

  • Exporting and importing of compatible JSON files from formats including OBJ, Max and Blender
  • Effects such as cross-eyed, parallax barrier and anaglyph
  • Animation such as forward kinematics, inverse kinematics, morph and armatures
  • Data loaders including JSON, scene and binary
  • Over 150 files of coding examples
  • Scene features including fog and adding and removing objects at run-time
  • Objects such as particles, sprites, lines, ribbons and bones

This may all seem very confusing at first glance, but developers using three.js are well supported by the issues forum online at GitHub as well as Stack Overflow. It is also possible to have real time support using IRC via Freenode.

Using Three,js in the real world

So in the real world, what do we use three.js for? Many things. 3D graphics, 2D graphics, animation, VR, video games; all created using the three.js library with the WebGL API.

Want to check out three.js in action? See the following links.

Other points to note about three.js include:

  • It allows you to work locally without a web server
  • requestAnimationFrame( ) allows you to add an animation loop to a single, static image
  • it is helpful to have some background experience working with 3D before using three.js, although not essential.
  • The official Three.js website includes a range of demos and links to the support community.