Creative Month Challenge

CMC #6 – How to use Three.js export plugin in Blender?

This time, instead of modelling, I decided to write a tutorial mentioned in CMC#4.

In this short tutorial I’ll explain how to install and use Three.js export plugin for Blender. I’ll be working with Blender 2.70a but it should work with some older versions as well.

Installation

First, you’ll need to download Three.js package – you can get it from here.

After unpacking it, navigate to utils\exporters\blender\2.6x\ and copy scripts directory to one of the following locations:

Windows

C:\Users\<your_username>\AppData\Roaming\Blender Foundation\Blender\<blender_version>\

 Linux

The default would be:
~/.config/blender/<blender_version>/

However, if you’re using Ubuntu and have installed Blender with apt-get or Software Center then the location would be:

/usr/lib/blender/

 OS X

On OS X the location depends on where the blender.app directory is located.

Assuming that Blender located in the /Applications  directory, the path would be following:

/Applications/Blender/blender.app/Contents/MacOS/<blender_version>/

Activation

Now let’s move to Blender.

In order to enable the plugin, go to menu File – User preferences and navigate to Addons tab.

user-preferences-screenshot-1
Blender – Addons tab

Type in three in the search box or select Import-Export category and go to the very bottom of the list. At the end of the list you’ll see “Import-Export: three.js format” item. Mark the checkbox corresponding to this item.

Blender - Addons tab - mark the checkbox next to the three.js exporter
Blender – Addons tab – mark the checkbox next to the Three.js exporter

Press Save User Settings button to make sure the changes will be preserved until next Blender start and close the window.

Usage

Let’s see if everything went OK. Add a simple object to the scene, in this case Suzanne, select it and go to menu File – Export – Three.js (.js)

Blender - File/Export menu
Blender – File/Export menu

A new window should appear. There you can select where to save the exported file and also configure some export preferences e.g. if it the exported file should include UVs or bones.

Blender - Three.js export window
Blender – Three.js export window

After pressing Export Three.js button a new .js file similar to this should be created:

And that’s it! If you wish to learn how to load exported model with Three.js, go and check out episode 4 of the Creative Month Challenge. Thanks!

by Greg

2 Comments »

2 thoughts on “CMC #6 – How to use Three.js export plugin in Blender?”

Leave a Reply

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