Basic Model Export

Preparation

One convenient way to get your models from Blender into the Three is by using the Blender exporter distributed with Three. Let's try this now. This exporter writes a JSON-based format native to Three. Assuming you are using a 2.6x version of Blender, you can download the exporter here. Installation instructions are provided inside the download. Exporters for other modeling tools are also included with the Three.js distribution.

For future reference, note that exporting into a common format like *.OBJ and then translating into JSON using one of the translators provided with Three like this one is another possibility. Finally, exporting Collada from your modeling tool is also an option, as Three reads (some subset of) Collada as well.

Testing

Follow the following steps to quickly create a simple textured cube and visualize it using Three. You should have already installed Blender and be set up to work from your local drive as described here. In your local copy of the example, find the "models" subdirectory and make a new subdirectory called "test".

  1. Start up Blender.
  2. Look at the Properties editor (at right).
    1. Press the World context button. In the World panel click Ambient Color and change it from black to middle gray.
    2. Press the Material context button. On the Diffuse panel change Intensity to 1.0. Do the same on the Specular Panel. In the Shading panel put a check in the Shadeless box.
    3. Press the Textures context button. Near the top in the Type drop down box, select "Image or Movie". In the Image panel, click New. Specify an appropriate name and size and click Ok. To the left, click the tiny image icon and select your new image texture.
  3. Choose the "UV Editing" screen layout (drop-down box to right of help menu at top).
  4. With mouse cursor in 3D editor, go into edit mode (Tab key).
  5. Unwrap (U key). Choose "Smart UV Project". Click Ok to accept defaults.
  6. In UV/Image editor at left, click the tiny image icon and select your image texture.
  7. In 3D window, set display method to "Texture" (drop down box to right of mode selector).
  8. In 3D editor, change mode to Texture Paint. Using the middle mouse button to rotate and the left mouse button to paint, make some kind of mark you can recognize on each side of the cube.
  9. To the left, select Image->Save as image and save the image to the "test" directory you created above.
  10. At top, select File->Export->Three.js.
  11. Make sure the export directory is sensible (not the root of your drive).
  12. Click the "Export Three.js" button. Export the model to the "test" directory.
  13. Now edit the html file for the example in your favorite editor. Look for the path to the old model (e.g. "models/vwbug/vwbug.js") and replace it by the path to your test model (e.g. "models/test/untitled.js").
  14. Now run the html file in the browser as in the previous example. If you see your model, the test is passed. If not, look carefully at the instructions above to find the problem.