Get started with WebGL using three.js

WebGL, which is widely supported on all modern browsers, enables you to work with hardware-accelerated 3D graphics in JavaScript, opening up a huge range of possibilities for browser-based apps and games – just check out these 20 amazing examples of WebGL in action, for proof.

Download the code from FileSilo

WebGL itself is rather low-level, and it's unlikely you'll want to work with it in its vanilla form. There are a range of libraries and even game engines available to provide higher-level functionality.

In this tutorial I'm going to show you how to make an app or site that uses WebGL in combination with three.js, which is a free open-source library providing abstraction of WebGL.

01. Get three.js

You'll need to start by getting hold of three.js. Once you have the latest build, place three.js into your project folder. We'll then add it as a script to our page like any other JavaScript library. We'll place our own code into a separate JavaScript file.

02. Set the scene

We need three things to get started with WebGL: a scene, a camera and a renderer. A scene is where we place objects to be displayed by three.js. A camera is the point of view from which we will see them. The renderer brings the two together and draws the screen accordingly. Once we have these set up, we add the renderer to the document.

03. Create a loop

Next, we need to create a loop to actually render our scene. We do this using the renderer.render() function, but the key part is to recursively use requestAnimationFrame(), which is a built-in function that enables the browser to request another frame when it is ready to draw one. Using requestAnimationFrame() is easier and results in smoother animation than trying to time drawing of frames yourself.

04. Create basic objects

Now we can start adding some objects to our scene. We can do this by creating Mesh objects and adding them to it. A mesh is composed of geometry (the shape of the object), and a material (the colour or texture used to paint it). We'll create some basic objects by defining three different geometries, and assigning different colour materials to them.

05. Specify a position

By default, objects are added at the origin (x=0, y=0, z=0) of the scene, which is also where our camera is, so we'll need to specify a position for them as well. We're then ready to add the meshes to our scene, which will mean they are automatically rendered in the animate() loop.

06. Add a light source

If you view your page now, you'll find things are looking a little flat. There's no lighting applied to the objects, so they are solid primary colours and look two-dimensional. To fix this, we need to switch from MeshBasicMaterial to a material that supports lighting; we'll use MeshLambertMaterial. We also need to add a light source to the scene.

07. Move the source

Now we're getting there! You should see what are quite evidently three-dimensional objects on your page. What we haven't yet done is taken full advantage of the animate() function. Let's make a few changes to have our light source move around in a circular motion above the objects.

08. Add texture

In practice, we probably don't want our objects to be flat colours. It would be more typical to apply some texturing to them from a file. We can do this using THREE.TextureLoader(). Let's change how our cone object is created to utilise a texture we've loaded from a file. The function is called when the file is loaded.

Where to find free textures for 3D projects

09. Make it natural

Things are looking better, but something still isn't quite natural. The texture looks very flat and doesn't respond to the lighting. We can solve this through the use of bump mapping, which enables us to use light and dark parts of an image to simulate texturing on the surface of an object. Let's try this out with a different texture on the sphere. We'll switch the material to MeshPhongMaterial, which allows us to specify a bumpMap attribute.

10. Add controls

As a final touch, give the user a little control over the scene. To add the ability to pan around, there's an extra library that ships with three.js that makes it incredibly easy to do just that. Make sure to extract OrbitControls.js from the three.js package to your project directory, and include it in your page. This is one of several control libraries that ship with three.js to fulfil common styles of camera control.

11. Apply to camera

Now all we need to do is create a THREE.OrbitControls object and apply it to our camera. The library will take care of the rest for you: you won't need to listen for clicks, mouse movements, and so on. You might also want to move your objects back to the origin point, and offset the camera instead so that it can pan neatly around the objects.

With that, we're done with our introduction. You should have three objects with varying styles of texture, some dynamic lighting, and a user-controlled camera to play with.

This article featured in issue 268 of Web Designer, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Subscribe to Web Designer now.

Liked this? Try these: