Get Started with Three.js

The process of creating 3D animations was previously costly, time-consuming and requiring significant learning. Until now! Thanks to Three.js, 3D animations in the browser are now more feasible than ever before.

Before Three.js, you had to use special 3D programs (Maya, Blender, etc.) with inbuilt programming languages to create and export video or to compile new stand-alone applications. These programs would access the Graphic Processing Unit (GPU) and enable the computer to render things such as shadows, reflections and atmospheric distortion at a frame that would otherwise be impossible. On top of all this, a plugin or extension was required in the browser in order to be able to view the 3D graphics.

Thanks to the advent and implementation of WebGL in the browser, all these constraints are a thing of the past. Watch below as Alec Sloman introduces us to the wonders of Three.js!

Have you had a play with Three.js yet? Do you think you’ll give it a go now that you have all the tools to test drive it yourself?

Jess: I’m here with Alec Sloman, who is a web developer at 99Designs, and Alec is going to tell us about Three.js today. What exactly is Three.js?

Alec: Three.js is a Javascript library that allows the web developer to draw 3D content directly into the web browser, which until recently was something that one, we couldn’t do, and until more recently, was something that was really hard to do. Basically, it is a really easy way to draw 3D in the web browser.

Jess: Where does Three.js come from, then?

Alec: Three.js is developed and maintained by a guy named Mr. Doob, but originally it started as an experiment at Mozilla. In 2007, they were trying to find a way to draw 3D content into the newly introduced canvas HTML element, and eventually, those experiments were taken over by the Chronos group. The Chronos group brought this technology called WebGL to a stable release in 2011.

Jess: What kind of projects can you bring to life with Three.js?

Alec: Pretty much anything you can imagine, anything that would be cool to model in 3D. What it comes down to is that, as web developers, we already have a lot of technologies in our toolkit, but most of us will know at least one server side language, like PHP. Most of us will know, at least, some Javascript. This allows us to drive 3D visualizations using the technologies that we already know. That’s its true power. It gives us the tools to be able to do that right now.

Jess: What kind of background do you need to get started with these sort of things?

Alec: So the cool thing about Three.js is that you really don’t need to know a lot of really low-level stuff that typically comes along with 3D development. You could probably get by just knowing a little bit of HTML, some Javascript or even just some jQuery. Fortunately, the library is written in such a way that it’s beginner-friendly.

Jess: Where would I get started if I wanted to learn more about this?

Alec: Google would probably be your best starting place, but more specifically, there’s a website called Learning Three.js, which I think actually might be written by Mr. Doob himself. Also, if you ever run into any questions, Stack Overflow has a quite active community of people that are discussing Three.js, and actually, there are at least a couple of folks out there as well that you may consider checking out. In general, there are lots of resources about Three.js online and they’re pretty easy to find.

Jess: Can you show us an example of Three.js brought to life?

Alec: Sure. Actually, there are lots of really sweet examples online, so let’s have a look at some of those.

Jess: Let’s do that.

Alec: Here I’m going to show a couple of examples of Three.js in action. I’m going to go from simple to more advanced, and you can see that you can accomplish some really cool things with it. The more basic examples, I think, would be achievable for most people who even have a little bit of development experience. As we go along, you can see that you actually can build quite complex applications with it. Starting with this, this is just two spinning cubes put into a scene and lit with different textures. Again, this could potentially be written in under 50 lines of code. You can see there are two objects here that react to mouse movements, and each have their own unique texture, and these textures are both built-in. I mean, that’s a more basic example.

Moving along, you can see the moon actually orbiting around the globe here. This is an example of using two built-in geometries and then using your own texture maps, and a lot of these texture maps are available on the web. If you Google for ‘Earth texture map’, you can find them and use the built-in loading libraries to create image texture maps and apply them to your geometries, and then you can use some built-in map functions to do these orbits as you can see here, and then, of course, using a point light, we actually have lighting that makes sense. This might even cast a shadow on this, I’m not exactly sure. You can move this around. There are a lot of really great parts of the Three.js library that will allow you to do interactions like this, without needing to write too much code.

You’re getting a little more complicated here. You have these really nice particle generators so you can do incredible mazes of objects just suspended in space. This would probably be a little more advanced. Now we’re going up to more beautifully animated scenes, using all of sorts of post-processing filters, that’s another really cool thing that Three.js has. A lot of these textures, and actually this plain terrain here, use all sorts of really cool font maps and specular maps to accomplish quite realistic looking 3D. Again, this is just running in Google Chrome.

For the more adventurous, and for those who have a lot more time, you can even implement full games. So let’s give this a try. Start in casual mode. Let’s see how long it takes to load. Hopefully, you can just edit over loading sequence and anything else like that if I’m assuming correctly.

Jess: Mm-hmm.

Alec: Is this sort of what you were thinking?

Jess: Perfect. Exactly what I was thinking.

Alec: Sweet. Even this loading screen is an example of Three.js at work. You can see here, you’ve got incredibly detailed maps being drawn on all of our geometries, you have some built-in physics, and again, this is an actual 3D application running on this Macbook Air’s GPU. It’s right in the browser. You can see that probably within a couple of years, the browser’s going to be a perfectly legitimate way of delivering 3D experiences. Anyway, this is just a couple examples of Three.js in action, and I hope you enjoyed it. Thank you.

Jess: Thank you so much for your time, Alec. This has been Jess Brown with Learnable.com.