Learning Three.js

or WebGL for Dummies

Zero to Nyancat in 30 Seconds Flat!

So, today we are gonna learn how to use Yeoman for three.js. We are gonna create a Nyancat in WebGL, starting from nothing in only 30 seconds. It was a challenge to see how fast we could reach using the yeoman tools. Here is the demo we gonna build in 30 seconds :) You are gonna see how easy it is through a talk i made at parisjs! But first… what is yeoman? Well, yeoman is a “Modern Workflow for WebApps”. It is composed of 3 tools: bower, grunt and yo.

Let’s see how yeoman will help us ease up and speed up the work when we’re doing three.js. You can look at the screencast of me doing the talk, or directly at the slides below. If you are in a rush, here is the TL;DR executive summary. Have Fun :)

Update: I am experimenting with udemy and made a course from this post. Check it out “Yeoman For Three.js”. More than 30min of video :)


To generate the boilerplate, just do

yo threejs-boilerplate

To install any threex extension for three.js, and threex.nyancat in particular, do

bower install threex.nyancat

Video Of The Talk


Here are a screenshot of every slides. Or you can directly look at the slides.