In this fifth and final post of the tutorials on how to make animated peeps that display in Three.js, you will load the character named 'Kurt' into Three.js and watch him strut his stuff. There just a few tasks left to do.

This is the fourth in a series of tutorials designed to help you build animated 3D characters in a matter of minutes. It is taking me much, much longer to write these tutorials then it did to make my first demo that finishes with eight characters dancing about.

By now you should have a character model in an MHX file and a MoCap BVH file. Now we want to use Blender to combine the two and export them so that they can be displayed in your browser using Three.js.

This is the third in a series of tutorials that guide you through the process of sourcing and using applications that enable you to create 3D animated characters visible in most (but not all) modern web browsers. The ambition is to show you how you can create a demo of a character with a suitable motion in a matter of minutes.

The goal of these tutorials is to help you create a 3D character, add a motion to it and get it playing in your browser ASAP. In this second tutorial I cover creating a 3D model using a FOSS application.

The holy grail of coding for 3D display is creating real-time photo-realistic animations of human beings. If this is so then my demo is a holy fail. Why is it a fail? Let me count the ways:

Each loop starts from a different place than from where the previous loop ended.

It's so bad, I make the characters disappear between loops

Some characters float above the ground, whereas others have their feet buried in the ground

None of the characters have hair

The coding often moves the character to the exactly same place a dozen times

These are low polygon count characters - so things like hands passing through bodies happens

And on and on...

Even if the demo is full of holes, there is nevertheless a holy aspect to the demo. It's one of the first of its kind. We've got 3D peeps dancing around in your browser all created using just a couple of hundred lines of JavaScript. They have shadows, can be loaded at asynchronously at run-time ['just in time' delivery]. Any character can be matched up to any motion. The process starting from creating a rough and ready character, adding motions to it, and to seeing the peep animated in your browser can take as little as a two or three minutes. [Perfection takes a little bit longer.]

One of the beautiful things about an HTML web page is that the page can can grab images, style sheets and JavaScript from just about any server on the web. The cross-origin feature enables third-party ads to be displayed, visitor statistics to be monitored, jQuery code to be updated automatically and much much more.