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.
For example, the 3D graphic used at the top left of this page took less than 60 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.
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.