Anxious to get started with WebGL and three.js, but have no clue where to begin? Relax, take a deep breath and let this list of resources guide you along the way.

 

Online resources

My Pluralsight course on WebGL and Three.js Fundamentals is a great starting point. Yes, I may be a bit biased, but I think I've put together a darn good course to get you up to speed on WebGL and three.js in just over two hours. You'll start off by with a brief history of WebGL and three.js, and will then go through the fundamentals such as meshes, lighting and materials, and also more advanced subjects like collision detection and physics engines. Finally, it all comes to a close by putting together a 3D version of the classic game, Frogger. You can also check out examples from the course here. And the Frogger game is available right here.

Also of note is a small workshop I created for MelbJS camp on three.js.

 

Books

For those of you who prefer learning from something a little more tangible, I recommend the following:

 

 

• 3D Game Programming for kids: Don't let the kids bit in the title put you off. This is a great book to very quickly get up to speed and it has a solid explanation of some of the math behind 3D programming. I read this in a weekend and would highly recommend it.

 

• Learning Three.js: The JavaScript 3D Library for WebGL: This book gives an excellent overview of the framework and is good to keep on hand as a reference. It's also worth noting that the author included all of the examples from the book online (be sure to check these out--some are really awesome!).

 

• WebGL up and running: Author Tony Parisi was one of the guys behind the VRML spec and some other 3D-related standards. So you can rest assured that he really knows what he's talking about. I like that he covers some advanced topics, along with some great examples. One thing I don't like as much is that the examples use a library by the author (sim.js), which makes it a bit harder to translate if you don't want to use this library.

 

 

Websites

And then, of course, there are several great websites you can reference to help you along the way.

 

 

• Three.js Examples: This is a great set of examples that I found myself frequently referring to for more advanced concepts. It's worth noting that these examples use an older version of the library, so you may need to modify the code a bit.

 

• The concepts of WebGL: Great explanation of how WebGL works at a lower level.

 

• WebGL Fundamentals: This provides another good overview of how WebGL works.

 

• Learning WebGL: Want to learn how to use WebGL without a framework? This site's for you.

 

• Physijs: Physisjs physics library for three.js wraps another library called ammo.js (an Emscripten port of Bullet). Physijs makes it easy to add real world physics to your scenes, and it contains some awesome examples you can use as a jumping point for your applications.

 

• TF3DM: Not a 3D artist? No problem. This one takes a look at a great set of easily searchable models, available in various formats. Note that some models are free to use and some are not.

 

• Blender: Head here if you're looking for a free open source modelling package. It's not the easiest thing to use, and it has a steep learning curve. You'll almost certainly have to work through some tutorials, but it's a powerful application--and it's free.

 

• OpenGameArt: This is a good resource for textures and images for your games and applications.

 

 

Starting from scratch

Please not that while these are all great resources to help you get started with WebGL and three.js, some are a bit more complex than others. In order to avoid feeling frustrated by the time you're finished, consider beginning your journey with the aforementioned Pluralsight course and the book on 3D programming for kids. After that, you can dive into the rest.

Fore more information, you can also check out the slides and examples from my webinar on getting started with WebGL and three.js.