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 :)
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
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.
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.