Learning Three.js

or WebGL for Dummies

Boilerplate Builder for Three.js

We recently introduced a boilerplate for three.js in a previous post. It aims to ease your first contact with three.js. It contains a template for a simple project, a sample on which we already applied good practices. You download it and run it in a matter of minutes. Thus you can immediatly focus on your own things. In short, it aims for Fast bootstrap + Good Practices.

It seems nice, hey ? Well there is a glitch. The boilerplate for three.js needs more flexibily. In a way, it acts as a ground on top of which you start your own thing. We do our best to provide good defaults, but they are only defaults. What if you got specific requirements ? How to start your project then ? The boilerplate builder has been written for you :)

Try it out. Go ahead, play with the options, discover what they do and customize your own boilerplate. The screencast below is short introduction where i describe the boilerplate builder.

Making-Of the Builder

The builder itself was interesting to build. It uses various nice features from the current web. It is a pure-browser webapp with a file download, a preview of a webgl project and a nice looking visual appearance.

Pure Browser Download

I like to write pure-browser application. They dont require a server to run, only static files. It makes it much easier to host your application. So boilerplate builder has been written as a pure-browser application :) It uses jszip , a library which create .zip files with Javascript. Its creates the boilerplater.zip that you download. Additionally, it uses downloadify , a small library to create and download files without server.

Together, jszip and downloadify makes it easy to pack several files together, and allow the user to download it. All that in pure-browser, neat no? I love what the web is becoming!

Boilerplate Preview

The preview is a bit different. We start to load the index.html template for the boilerplate. We apply all the options you configured and produce the final version. To actually preview this file, we encode it in base64 to build a data url with it. Only then, we create an iframe with this data uri and you can see the webgl preview :)

Data url is an old thing from 1998 which is back in spotlight due to HTML5. It allows to encode data directly in the URL. It may be used to include image directly in css for examples. Very usefull but not for human consumption. To give you an idea, here is index.html as a data url in base64. You could encode it as text if you escape it properly. It looks like long ugly random string.


Visual Appearance

It includes twitter bootstrap for css. I am quite grateful for this framework. Without it, the builder page will be so ugly, that people run away without even trying the application itself. twitter bootstrap makes it so easy to write a webapp which looks good on the screen. I think all the css-impaired of the world should thanks twitter for this framework :)


It has been quite fun to write it. I learned some web skills, discovered new part of three.js, and on top of that, it looks good on screen. I could not ask for more. The goal of boilerplate builder for three.js is to add more flexibility to the fast bootstrap + good practices from the boilerplate. I hope it will help people starting lots of new three.js projects :)

That’s all folks. Have fun.