Three.js + Blender 2.5 = FTW

For anyone who has played with Away3D in Flash inevitably you hit a moment where you go man this is cool but these 1k poly counts are really frustrating. This is due to the fact that until recent beta demos Away3D had no access to the GPU and was dependent on a completely software based solution. I always kept thinking in the back of my mind man wouldn’t it be nice to be able to export a reasonably low poly model from Blender, Maya, (insert 3D program of choice) and not have to worry as much about poly counts or uv’s, etc. Enter WebGL. Now supported in Chrome, Firefox 4.0, and Safari nightly betas WebGL is a Javascript based wrapper using canvas and some magic to talk to the GPU via OpenGL ES 2.0. More Info

Preview

Here is a preview of what we will be building. Mr. Bird Preview

Three.js

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.

5 comments

  • Hello there,

    This is an interesting article. I have always wondered of a way to get my 3D models and being able to applying them on my website giving an element or interactivity. (i.e. the user being able to rotate the model on the web browser). However, an I correct in assuming that is the user does not have Three.js he/she will not be able to view the model on their browser? There reason I ask is because most 3D novices will not know to install Three.js.

    Any insight on the matter?

    Kind regards

    Selex3D

    • Three.js is just a JavaScript library that simplifies the task of working with the browser’s built in WebGL capabilities. The library will automatically be loaded like any other JavaScript file when the page loads. The real problem is browsers that don’t support WebGL, such as IE and most mobile browsers. Note: Firefox mobile does support WebGL.

      • That is right.
        You can also use ajax to call object separately and get better the performance.I am working on that now.

  • Hey Brother its a pretty nice share , I m facing a problem installing threejs library, i did as it was mentioned by you and on that git repo, but the problem is in my blender 2.57 addons menu, this addon import-export threejs format is disabled, and i can’t enable it, its just that addon is locked or something,

    kindly help me with this brother,
    thanks and regards
    Suleman Mirza

  • This is the error that i am encountering,
    ImportError: No module named bpy_extras.io_utils
    Traceback (most recent call last):
    File “C:\Users\username\AppData\Roaming\Blender Foundation\Blender\2.57\scripts\m
    odules\addon_utils.py”, line 207, in enable
    mod = __import__(module_name)
    File “C:\Users\username\AppData\Roaming\Blender Foundation\Blender\2.57\scripts\a
    ddons\io_mesh_threejs\__init__.py”, line 50, in
    from bpy_extras.io_utils import ExportHelper, ImportHelper
    ImportError: No module named bpy_extras.io_utils

Leave a Reply

Your email address will not be published. Required fields are marked *