Three.js: The Basics

Three.js is an easy to use, lightweight, JavaScript 3D library. It provides many renderers such as canvas, WebGL and so on. In this article, I will be using WebGL renderer.

WebGL (Web Graphics Library) is a JavaScript API that brings hardware-accelerated 3D graphics to the browser without the aid of additional plugins. WebGL runs on your graphics card’s GPU (Graphics Processing Unit), which means that your CPU (Central Processing Unit) can concentrate on other tasks. From a user’s perspective, applications simply run much faster. Three.js library makes it easier to work with WebGL.

So, let’s create some simple 3D graphics using three.js.

Prerequisites

Make sure your browser supports WebGL and you can check WebGL browser compatibility here. Download the latest version of three.js from GitHub and include in your HTML file.

In <body>, define a <script> as shown below.

<body>

<script>

// our script goes here..

< /script>

< /body>

Creating the Scene and the Renderer

The concept of scene is used to define an area where we can place things like geometry, lights, camera and so on. A renderer is what makes an object appear on the screen. You can have as many scenes as you want, but one renderer can draw only one scene at once.

Three.js provides certain renderers, but I will focus on WebGL renderer. To get started, let’s define a Scene and a WebGLRenderer.

//define scene

var scene = new THREE.Scene();

//define renderer

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

// Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output canvas.

renderer.setPixelRatio( window.devicePixelRatio );

// Sets the clear color and opacity.

renderer.setClearColor( 0x000000, 1 );

document.body.appendChild( renderer.domElement );

Notice that in the last line, we have added the renderer to body of the HTML document.

Geometry, Materials and Mesh

Geometry is basically concerned with questions of shape, size, relative position of figures, and the properties of space.

As the documentation says, “Materials describe the appearance of objects. They are defined in a renderer-independent way, so you don’t have to rewrite materials if you decide to use a different renderer”.  This is one of the important aspects of three.js.

Three.js provides some helper functions with which we can create some geometrical shapes. It also provides several materials, but we will use MeshBasicMaterial.

Another thing we need is a Mesh. A mesh is an object that applies a material to a geometry, which we then can insert to our scene, and move freely around.

geometry = new THREE.CircleBufferGeometry(4, 32);

material = new THREE.MeshBasicMaterial( { color: 0x536dfe, wireframe:true } );

var circle = new THREE.Mesh( geometry, material );

scene.add( circle );

geometry = new THREE.BoxBufferGeometry(1, 1, 1);

material = new THREE.MeshBasicMaterial( { color: 0x536dfe, wireframe:true } );

var cube = new THREE.Mesh( geometry, material );

scene.add( cube );

Here, we are using two objects CircleBufferGeometry and BoxBufferGeometry to create a circle and cube respectively. Note that the BufferGeometry is more efficient compared to Geometry in terms of GPU usage.

Creating Camera

Camera plays a crucial role in rendering the objects. It aids the renderer such that the renderer knows from which point of view it must render. There are a few different cameras in three.js. For now, we will use PerspectiveCamera.

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

And we will set the position of the camera.

camera.position.z = 10;

Render

Since we have all the set up to render, the last step is to render the things that we created above.

var render = function () {

requestAnimationFrame( render );

renderer.render(scene, camera);

};

requestAnimationFrame is similar is setTimeout but you can pass a parameter along to the function that’s being called, such as the current element being animated.

renderer.render will draw the objects on the screen. Now, let’s rotate the cube and circle by adding the following code within render().

circle.rotation.x += 0.01;

circle.rotation.y += 0.01; 

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

The above lines will run every frame and give the cube and circle a nice rotation animation.

For the complete source code and final 3D graphics demo, check out my Pen.

Wrapping Up

I think three.js is an amazing library that unlocks the power of WebGL. If you are interested, look at three.js site which has a good documentation and lots of examples.

As there is growing demand for browser based games, 3D graphics has become one of the key topics in the web community. Apple’s WebKit team has proposed a new Community Group at the W3C to discuss the future of 3D graphics on the Web. Check out the article here.

I hope you will enjoy working with three.js!

 

One thought on “Three.js: The Basics

Comments are closed.