Skip to main content

Creating 3D web content using HTML5 and three.js

Rendering 3D content in an internet browser has always been challenging. However with the introduction of HTML5, a new field of opportunity has arisen.

Rendering 3D content in an internet browser has always been challenging and until recently this would have been achieved through the likes of Unity, or Flash (and its associated 3D libraries). However with the introduction of HTML5, a new field of opportunity has arisen that allows developers to render 3D content without the use of external plug-ins.

Three.js is a JavaScript library / API developed specifically to create and display 3D graphics within HTML5 compatible browsers and it provides developers with a set of objects and functions similar to that of the ActionScript Papervision3D library. There are several contributors to the project, the main contributors being Mr.Doob and AlteredQualia.

Mrdoob.com has an extensive set of examples that demonstrate the awesome capabilities of the library and what can be achieved using HTML5. Below are some examples that we have decided are too cool not to share!

Mr.Doob Depth of field

An example demonstrating depth of field through the use of the Three.js library.