Importing the reconstructed Final Fantasy VII scene into Three.js

This post is the second part of a series, you can read the previous and next post here:

Part I - Final Fantasy VII scene reconstruction using Blender (Part 1)
Part II - Final Fantasy VII scene reconstruction using Blender (Part 2)

In my last tutorial I explained how to reconstruct the walkmesh, the camera settings, and the objects on a scene from a Final Fantasy VII, using a picture, Blender, and some plugins.

The next step I wanted to make was to import this data into a 3D engine, I've chosen webGL using three.js, three.js it's a javascript library that simplifies writing code for webGL, it's super easy to use and understand and works pretty well. This would allow me to load the scene using a web browser without requiring any plugin.

The first thing that needs to be done is to export the whole Blender scene into three.js and for doing this, the library comes with a Blender plugin that you can install for doing the job.
At the time of writting this, if you get the library from the master branch, you will not be able to load the scene. The plugin is currently being rewritten and you will need to grab the new version from the dev branch.

For doing so, clone the dev branch of the threejs project like this:

git clone -b dev  

Now move the folder:


To the blenders plugin folder, in my case:


Then the plugin can be activated in Blender:

Blender threejs plugin activation

Now the scene needs to be set up for exporting to threejs, I had to set some things in order to get an acceptable result.

First, camera size and FOV. I got this by trial and error, and I don't know the exact reason for these values. But in my case I had to set the camera's focal length to 15, and then adjust the camera size in order to fit the whole scene into the camera's borders again.

Setting camera FOV and size

Then I had to set the material for every textured object in the scene. I've created a simple material using the image texture and applied to every textured object in the screen. You can't still export Shadeless materials, and that would be perfect so instead I tried to simulate it using a Toon material.

Toon material will look kind of ok

Now you can expoert the scene by clicking Export » Three.js. Make sure you check the following options:

Exporting options

It's specially important to set the options highlighted in red. You can save these settings for using them later by clicking the Save Settings button.

Finally click the export button, the scene will be saved as a JSON file. You can open and review it using any text editor, just to make sure that everything is correct.

Once you've got the file, you can start coding the website where the scene will be displayed.

The resulting website will look like this:
Final fantasy scene

I will publish on github the whole code once I develop some new key features I want.

See you in the next post!