Three.js + Blender 2.5 = FTW
Here is a preview of what we will be building. Mr. Bird Preview
Now this is where it gets really cool… Three.js is a library that makes this whole process super simple and quite similar to anyone who as used Away 3D. For the purposes of this post we are going to concentrate on the process of getting a model exported from Blender and into Three.js. If you need more info and other examples please check out the project on GitHub. Here
Installing Three.js plugin for Blender.
Let’s get it started… We will need to get the Blender exporter script installed. When downloading and extracting the Three.js project there should be a “utils/exporters” folder. Look for your version of Blender (Either 2.56 or 2.57) and install the Three.js plugin using the instructions provided here.
Exporting a Model from Blender
Now that we have the plugin installed we can fire up a model to test with. I used a bird model that I got from the Big Buck Bunny project. Here (bird.blend) This model had 32k faces so I thought it would be a good test for performance.
Now the magic. File -> Export -> Three.js. That’s it! Blender will export a model in JSON format that is ready to use within Three.js with Geometry, UV’s and materials.
In Part 2 we will explore how to actually get this exported JSON model working in Three.js.