A Boilerplate Builder
for Three.js
 

Fast Bootstrap + Good Pratices + Flexibility

Jerome Etienne

Hue ? A boilerplate for three.js ?

Boilerplate for Three.js

• Template to start a three.js project
• Made to to ease your first contact with three.js
• inpired by html5 boilerplate excelent work
• Fast BootStrap + Good Practices

Fast Bootstrap

• Step 1: download the files here
• Step 2: Point your web browser to them
• Step 3: You are done.
• Total time: less than 1min

Good Practices

• Cross Plateform: important to run everywhere
• fallback on canvas2d if webgl isn't available
• Support mobile with canvas and touch event
• Fullscreen: enjoy your 3D on a large display
• Screenshot: Share nice images with friends
• Window Resize: required not to loose centering/scaling

Flexibility ?

• none, only static files with good defaults
• What if you got specific requirements ?
• How to start your project then ???
• a builder would be cool.

Good thing we got one :)

Boilerplate builder for three.js

• Done to provide more flexibility
• Avoid the default battle
• what goes in ?
• what stays out ?

Show, don't tell

• Let's use it to customize our boilerplate
• Play with the options and customize your own boilerplate
• Do it now. builder is here

Demo Time

All is said... what about a making of ?

Making-of the builder

• Designed as pure browser webapp
  • no need to run a server
  • jerome happy
• Use various modern web tech
• To build the builder was fun in itself

Pure-browser File Download

• tricky due to pure-browser

Step 1: pack the files

• use jszip to build in a .zip
• jszip alone gives bad filenames
  • default.zip, Unknown or even afhvfkjf1234lfkdf.part

Step 2: fix filenames

• workaround with downloadify. Use flash tho.
• Alternative: window.URL.createObjectURL() demo
• i learn about it after coding

Visual Appearance: twitter boilerplate

• a .css and a few .js
• Looks good on the screen
• Available here (2.0 soon)
• Ideal for css-impaired personns like me.

All is said... for real this time :)

Conclusion

• boilerplate builder for three.js is available
• Made to to ease your first contact with three.js.
• People seems to like it
• i learned cool html techs while building it

That's all folks.

Question ?

Jerome Etienne