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?
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?
Jess: What kind of background do you need to get started with these sort of things?
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.
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.
Jess is a video content creator for Learnable and Sitepoint. She digs all things social media, Web 2.0, music, film, digital media and innovation. Feel free get in touch!
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns