A Three.js Tutorial
Introduction :
WebGL has been available for some time now but due to its complex nature and the fact that hundreds of lines of code have to be written for even the simplest animations and possible security issues, it has not been utilised widely on the web.
With the advent of "three.js" and similar JavaScript tools such as "Babylon.js", this has all changed.
Three.js runs on most modern browsers without the need for plugins such as Flash etc. and is giving the savy web developer a marketing edge as well as being a realistic avenue for game developers to explore.
For example, the 3D graphic used at the top of this page took less than 50 lines of JavaScript to write. In fact it is possible to write an animation with three.js with less than 20 lines of code. More so, the code is easy to follow and debug if needed.
The advantage of Three.js is that it invokes the use of the GPU (Graphics Processing Unit) in your computer if there is one present allowing for seamless fluid animations.
If there is no GPU present then the choice of your browser (Firefox / Chrome etc.) may become critical to how well your animations perform.
Three.js is spreading through the web and can already be found as the basis for games as you can interact with objects in a three.js program. It also finds its way into the Business world in the form of novel marketing templates and in the field of general research is allowing the display of data in ways that only a few years ago was not feasable due to the expense of such.
Of note is that the code is very extensible and generally only with light modifications can be used over and over allowing the user to become quite familiar with the code in a short time.
This tutorial will assume that you have a basic understanding of HTML and at least some exposure to JavaScript coding.
If you are not familiar with JavaScript, it is a comparatively simple coding language to learn and picking up the basics would take less than a couple of days doing one of many courses available on line. A good course taking about ten hours in total would be Code Academy.
The aim of this tutorial is to allow you to at least emulate the example at the top with an understanding of how it works.
Due to limited sources on this subject, this tutorial does call heavily on the information at threejs.org but does so in an attempt to clarify the subject for the 'newbie'.
Hopefully you will be able to take it further from here.
