Running 3D graphics inside the browser with Three.JS. A first review by Usersnap.

three.js demo example and review

Over the last few years, browsers got some super powers. They evolved from simple viewers for HTML & CSS to platforms executing our beloved web applications.

With developments, such as WebGL or tracking.js, developers can do incredible things inside browsers.

Recently we stumbled upon Three.js. So we decided to do a review on how browsers are moving to a 3D world by making use of new libraries.

Libraries for the win.

We at Usersnap love browsers. Yep – we really do. Admittedly, I do not take browsers like the Internet Explorer into consideration. All in all, I think it’s correct to say that we are huge fans of the modern browser world and we love to see how developers are making use of recent browser technologies.

With tracking.js and other powerful JavaScript libraries bringing computer vision to the browser, we see a bright future for web browsers.

What is WebGL?

Before we get started with our three.js review, I’d like to take a moment to discuss WebGL.

WebGL, Web Graphics Library, is a “JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins”.

What does this mean? In short, WebGL is an API which is executed on a computer’s GPU in order to provide a great performance of interactive 3D graphics in real-time.

Remember the old days of 3D CAD rendering which needed superpowers? Well, luckily those days are over. Companies like Onshape are making use of WebGL in order to run everything in the browser.

And the great news is, that all modern browsers support WebGL (yes, even the Internet Explorer does).

What is three.js?

So back to the basics. You might wonder now what three.js is and what its connection is to WebGL.

Three.js is a library that makes WebGL – 3D in the browser – easy to use.

Sounds great, right? 🙂

With WebGL a simple cube would turn out a great amount of JavaScript code, whereas three.js only needs a fraction of that. Three.js is the lightweight library which makes it easy to get started with 3D programming inside the browser.

If you want to get started with three.js, I recommend downloading the three.js library directly from this website.

How to use three.js?

In order to use three.js on a project, you could download it from the mentioned three.js website. If you just want to give it a try, you could also play with three.js on codepen.io.

Just shoot up a new HTML file, which you need to display and run three.js.

<meta charset=utf-8>
<title>My three.js playground</title>
body { margin: 0; }
canvas { width:100%; height: 100% }
<script src="js/three.min.js"></script>
// the javascript will be placed here

The HTML assumes that you have downloaded the three.js library and saved in the same folder location. To actually display something with three.js, we need three things (I guess that’s why it’s called Three.js ;-). We need a scene, a camera, and a renderer, in order to render the scene with the camera. The code looks like this:

We need a scene, a camera, and a renderer, in order to render the scene with the camera. The code looks like this:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

The first PerspectiveCamera attribute is the field of view, the second one is the aspect ratio. It is recommended to use the width of the element divided by the height (or otherwise the image will look squished).

For further information on the camera and rendering, I recommend taking a closer look at this getting started tutorial of three.js.

So, now I’m going to add a cube. In order to do so, I need to add a BoxGeometry, which is an object that contains all the points (vertices) and fill (faces) of the cube.

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

We also need a so-called Mesh. This is an object which takes a geometry and applies a material to it.

You could also add your image to the cube, instead of using a colored cube.

var material = new THREE.MeshPhongMaterial( { map:THREE.ImageUtils.loadTexture('/image-url.png') } );

Animating the cube

When you have inserted all the previous code, you have probably seen a green box. In order to animate that box now, we need to add rotation to it.

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

This will give the cube some rotation animation.

Final output.

All in all starting with three.js seems pretty simple. Especially compared to WebGL. The full code for this first test is available in the codepen playground.

I definitely recommend playing around with it a bit in order to get a better understanding of how it works.

See the Pen three.js Playground by tompeham (@tompeham) on CodePen.


As you’ve seen in this first review, three.js gives us a nice range of possibilities for 3D graphics. For further information on three.js I recommend giving the official documentation a read.

And if you wonder what people are already doing with three.js, I recommend checking out the demo projects listed on threejs.org. There are some impressive websites up and running with three.js already.