Let’s quickly go over what you need to run a three.js app. First of all, you need a computer or a smartphone, but I’m going to assume that since you are reading this ebook then you already have one of those. Aside from that, you will need…

A three.js Developer

Yes, that means you! You are now a three.js developer. Congratulations!

As a three.js developer, you will need to know some very basic HTML and CSS, and some slightly less basic JavaScript. If you are new to web development though, don’t worry because we’ll cover everything that you need to know in three short chapters at the end of this introductory section: 0.6, 0.7 and 0.8.

It will also help if you know your way around the developer console of your favorite browser. Press CTRL + SHIFT + I on Windows or Linux, or CMD + SHIFT + I on Mac, to open it now.

A Modern Web Browser

Any modern browser can run three.js, where ‘modern’ means anything released in the last 5 years or so. You can even, technically, get a three.js app to run in Internet Explorer 9, released way back in 2011. Are you going to have a good time doing so? Probably not, but fortunately nowadays the amount of people using IE9 is somewhere below 0.1% of internet users.

You can also get three.js apps to run in all kinds of exotic environments like Node.js, Electron.js, or React Native. These are beyond the scope of this book though. Here we’ll be focussing exclusively on running your app in a web browser such as Firefox, Chrome, Edge or Safari.


WebGL logo

WebGL is an API for connecting your browser up to your graphics card, providing you with a lot more graphical processing power than is traditionally available on a website. You can use this power in any way that you like, but as the name suggests, three.js generally uses it for displaying 3D graphics. However, it is equally good at 2D graphics, and can even be used for GPGPU (General Purpose GPU) computing, as you can see in the flocking behavior and protoplanet examples.

Of course, to use WebGL we need a device and browser that supports it. Not so long ago, this was something that we had to worry about, but these days you can largely take it for granted that all users will have WebGL and that every modern smartphone, tablet, PC or laptop has a graphics card capable of running at least a basic scene.

Here are two places that keep track of current WebGL support:

Before you decide that you need to target that missing ~5%, take into consideration that they probably represent people using old computers, possibly on old corporate networks, who would not be able to run your fancy new fangled graphics anyway. Or who knows, these days perhaps they are internet connected fridges, toilets, wine bottles, or shoes.

They are not likely to be your target for a fancy WebGL app in the first place. Your audience on the internet is huge, so focus on the people that you can reach and don’t worry about the couple of percent that you can’t.