Building 3D in the browser with Three.js

Default avatar.
April 03, 2014
Building 3D in the browser with Three.js.

thubmnailWe have capabilities in our browsers that we wouldn’t have dreamt of 5 or 10 years ago. Entire 3D game worlds can run in the browser and interactive websites can be more immersive experiences.

With a certain virtual reality company being purchased by a certain social media company, now is the perfect time to start working with 3D. Amazingly, we can now create 3D with pure JavaScript, including meshes and materials.

Of course, even though it’s possible, it does require a huge amount of code, and that’s where Three.js comes in, allowing us to build 3D environments simply and with less code.

Browser compatibility

Unfortunately, because it’s new, 3D isn’t supported by all browsers. We’re currently restricted to Chrome, Safari and Firefox.

As time goes by, support on IE will improve, but for now you’ll need a fallback for Microsoft devotees.

Getting started

The first thing we need to do is head over to the three.js website and download the latest version of the library.

Next, reference it in the head of your document like you would any other JavaScript file, and we’re ready to go.

Creating our first scene

The first thing we need to do, to render anything with three.js is to create a scene, a camera, and a renderer. Starting with a scene:

var scene = new THREE.Scene();

Next, we need a camera. Think of this as the point of view that the user is looking from. Three.js actually has a lot of options here, but for simplicity’s sake we’re going to use a perspective camera:

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

This method takes four parameters: the first is the field of view, the second is the aspect ratio (I’d recommend always basing this on the user’s viewport), the near clipping plane, and lastly the far clipping plane. These last two parameters determine the limits of rendering, so that objects that are too close or too far away aren’t drawn, which would waste resources.

Next up, we need to set up the WebGL Renderer:

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

As you can see, the first thing here is to create an instance of the renderer, then set its size to the user’s viewport, finally we add it to the page to create a blank canvas for us to work with.

Adding some objects

So far, all we’ve done is set up the stage, now we’ve going to create our first 3D object.

For this tutorial it’s going to be a simple cylinder:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );

This method also takes 4 parameters: the first is the radius of the top of the cylinder, the second is the radius of the bottom of the cylinder, the third is the height, the last is the number of height segments.

We’ve set up the mathematics of the object, now we need to wrap it in a material so that it actually looks like something on screen:

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

This code adds a simple material for the object, in this case a blue color. I’ve set wireframe to true because it will show the object more clearly once we get to animating it.

Finally, we need to add our cylinder to our scene, like so:

var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );

The last thing to do before we render the scene is to set the camera position:

camera.position.z = 20;

As you can see, the JavaScript involved is extremely simple, that’s because Three.js is dealing with all the complicated stuff, so we don’t have to.

Rendering the scene

If you test the file in a browser now you’ll see that nothing is happening. That’s because we haven’t told the scene to render. To render the scene we need the following code:

function render() {
 renderer.render(scene, camera);

If you now take a look at the file in your browser you’ll see it does indeed render a cylinder, but it’s not very exciting.

To really enhance the value of 3D you need to start animating, which we can do with a couple of small changes to our render function:

function render() {
 cylinder.rotation.z += 0.01;
 cylinder.rotation.y += 0.1;
 renderer.render(scene, camera);

If you test in your browser now you’ll see a properly animating 3D cylinder.


If you want to see a demo and play around with the code you can do so here.

As you can see, creating this (admittedly very simple) scene took less than two dozen lines of code, and there’s very little math involved.

If you check out the examples on the three.js website you’ll see some incredible work that has been done.

This amazing library for JavaScript has really lowered the entry-level for coding 3D to the point that anyone who can write basic JavaScript can get involved.

Featured image/​thumbnail, 3D image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

AI Changes Everything and Nothing

The marketing frenzy surrounding the recent flood of AI-powered apps and services has caused some observers to question…

15 Best New Fonts, March 2023

Fonts are one of the most critical tools in any designer’s toolbox. With clever use, you can transform a design from hu…

20 Best New Websites, March 2023

We have another exciting collection of the best new sites on the web for you. In this month’s episode, there are severa…

Exciting New Tools for Designers, March 2023

We have invoicing apps and scheduling tools. Some resources will save you the trouble of hiring a designer or developer…

Free Download: Budget Planner UI Kit

Designing an onboarding process can be tricky; there are so many different options, and if you get it wrong, you could …

3 Essential Design Trends, February 2023

There’s a common theme in this month’s collection of website design trends – typography. All three of these trends show…

Free Download: Education Icons

Icons are essential for successful web design. They provide an eye-catching, unobtrusive way to communicate important i…

15 Best New Fonts, February 2023

The fonts you embed in your website transform the design and can mean the difference between an extraordinary brand exp…

Unlocking the Power of Design to Help Users Make Smart Decisions

Users are faced with decision-making on websites every day. The decision-making process can be far more complex than it…

20 Best New Websites, February 2023

The quality of websites in 2023 has moved up a gear, with designers cherry-picking trends as tools, embracing new ideas…

AI’s Impact on the Web Is Growing

Despite the massive strides tech has taken in the last few years, we rarely see a week as tumultuous as this. When your…

Exciting New Tools for Designers, February 2023

No matter what you’re working on, you can guarantee that there’s a cool app, resource, or service that will help you do…