Three.js 3D Javascript Engine using HTML5’s canvas

Three.js particles script
Three.js: Particles example


With the first public working draft of HTML5 released, experimentation with the new canvas and audio syntax additions began. The <canvas> tag is pretty stable and is close to completion hence the multitude of project being built upon making use of it. One of these projects is the experimental 3D Javascript engine developed by Ricardo Cabello also known as Mr.Doob. This engine is called three.js and below you can find a brief description about it.


What is three.js ?

three.js engine’s functionality is similar to a frameworks’ in certain ways. Typically an engine provides developers with a certain platform that will manage certain tasks thus reducing the time wasted in handling processes, physics, AI, rendering, memory control etc… However in this case three.js will provide you with a renderer (<canvas>, <svg> and WebGL), and control over camera and viewport. The physics and animation work is up to the developer to work out. Nevertheless it’s a great start and a new concept in the web industry.

Mr.doob - Voxels (HTML5) Three.js
Mr.doob – Voxels (HTML5) Three.js

Great examples  have been created by Mr.Doob and the code is released as documentation. The code is very basic and easily understood by even mediocre Javascript developers. If you’re planning on experimenting with it, you should consider that future releases might break backward compatibility as Mr.Doob warns that the API might change between a release and another, so don’t have any plans for projects other than experimentation.

Google chrome is the browser recommended to use in such development scenarios; It is HTML5 compatible to a certain extent and much better than FireFox, Opera, and definitely better than IE. In addition, Chrome’s JS engine is very fast and smooth.

three.js - 3D Portrait Rendering
Three.js – 3D Portrait Rendering
Mr.Doob - Three.js - Audio Processing
Mr.Doob – Three.js – Audio Processing


A Small note to be added regarding the Audio Processing image above. The concept is great, it’s a shame the browser doesn’t process the audio and return the amplitude as an instance variable of the audio object. The amplitude is hard coded, in other words if the audio track is changed the visualization will stop working. Yet, it’s a good implementation of audio visualization.



You can find more details about Mr.Doob and his experimentation projects on his blog. Follow him on twitter for interesting releases and hopefully be inspired to contribute to such promising project.


Last but not least, the code for three.js can be found on GitHub, simply follow the link below.

One thought on “Three.js 3D Javascript Engine using HTML5’s canvas”

  1. I like this snow but I met an issue.I see Three.js lib including here is r28; now the lasett is r46. I replace the Three.js with the lasett one. But always, it gives me error Uncaught Type Error: undefined is not a function for this line in html body. particle = new Particle3D( new THREE.ParticleBitmapMaterial( particleImage)); Is there any way to fix this problem? I prefer using the lasett Three.js(r46).

Leave a Reply