Please note: this has been tested with Three.js r82

I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5’s canvas, WebGL or SVG. And since it’s open source you could even get involved with the project. But right now I’ll focus on what I’ve learned by playing with it as an engine, and talk you through some of the basics.

For all the awesomeness of Three.js, there can be times where you might struggle. Typically you will need to spend quite a large amount of time with the examples, reverse engineering and (in my case certainly) hunting down specific functionality and occasionally asking questions via GitHub. If you have to ask questions, by the way, you should do that on Stack Overflow!

The basics

I will assume that you have at least a passing knowledge of 3D, and reasonable proficiency with JavaScript. If you don’t it may be worth learning a bit before you try and play with this stuff, as it can get a little confusing.

In our 3D world we will have some of the following, which I will guide you through the process of creating:

A scene A renderer A camera An object or two (with materials)

You can, of course, do some crazy things, and my hope is that you will go on to do that and start to experiment with 3D in your browser.

Support

WebGL support is really awesome nowadays: Chrome, Firefox, Safari, Internet Explorer and Edge all support WebGL. So there’s little reason to not use it!

Set the Scene

I’ll assume you’ve chosen a browser that supports all the rendering technologies, and that you want to render with Canvas or WebGL, since they’re the more standard choices. Canvas is more widely supported than WebGL, but it’s worth noting that WebGL runs on your graphics card’s GPU, which means that your CPU can concentrate on other non-rendering tasks like any physics or user interaction you’re trying to do.

Irrespective of your chosen renderer you should bear in mind that the JavaScript will need to optimised for performance. 3D isn’t a lightweight task for a browser (and it’s awesome that it’s even possible), so be careful to understand where any bottlenecks are in your code, and remove them if you can!

So with that said, and on the assumption you have downloaded and included three.js in your HTML file, how do you go about setting up a scene? Like this: