PhotoScan to three.js

authored by Frank Lynam at 08/11/2014 17:00:57

This blog post tells you how to get a 3D mesh from the photogrammetry app PhotoScan (I used version 1.0.4 build 1847) into a 3D-enabled web app built upon three.js.

  1. First you need to create your PhotoScan mesh. I’m not going to get into the ins and outs of mesh creation here, as there are plenty of guides online as to how to do this. I’ll assume that you have a mesh that you are happy with.
  2. OK, in PhotoScan click on File-Export Model. Select COLLADA from the file type list and select a destination and filename for your export.
  3. Leave the options in the export options dialog as is and click OK to complete the export.

PhotoScan export

  1. Now you need to use Blender. It’s free and you can download it here.
  2. We are using Blender as a bridge with which to export a JSON version of the 3D object. I know that the three.js Editor – see below – claims to support other 3D formats such as OBJ and COLLADA but I’ve found that it doesn’t seem to work as expected so it’s better to work with the JSON 3D format. We need a plugin to do the three.js JSON export and you can download that here. See instructions provided at this link on how to install it.
  3. Once the three.js export plugin is installed in Blender, import the COLLADA file that you exported from PhotoScan into a new scene.
  4. In the object browser, select and delete any superfluous objects (lights, cubes, et cetera), which are added by default to a new scene.
  5. Right-click on your object to activate it. You know that it’s activated when it’s surrounded by an orange line. Click on the Set Origin dropdown and select Origin to Center of Mass. This ensures that your object’s pivot point will be in its centre. This will be important later when you are rotating it in your web app.

Blender environment

  1. Now we need to move the object to the centre of the scene. Click View-Top. Use the green and red arrows to drag your object until it is located over your scene’s origin (where the axes intersect).
  2. Switch to the Right and Front views and repeat this process to make sure that it is centred along all the axes.
  3. Right-click on your object again to make sure that it is activated.
  4. Now go to File-Export-Three.js (.json).
  5. Select a filename and destination for your export and click Export Three.js to complete the operation.
  6. Now you need to go to the three.js Editor utility, which you can find here. I used Google Chrome as my browser as this seems to be the best supported.
  7. Click on File-Import and locate and select your JSON file.
  8. Scale the object up if required until it is visible. If it needs to be rotated, you can do that here too. If you correctly realigned the pivot point in Blender, your object should rotate around its centre.
  9. Now add a spotlight and position it as required.
  10. Rename the light and your object to something sensible and remember these for later.

three.js Editor

  1. Now click on File-Export Scene. This presents a tab or a new window with the JSON code for you scene.
  2. Save this to a file and call it scene.js.
  3. Now you can render the scene in a browser using three.js. See three.js docs for more info on setting up the scene. Here’s some HTML and JavaScript code (you’ll need to update the object names to reference the names that you gave the light and the object in the three.js Editor) that will render your object and rotate it slowly on its Z axis. Put the code in a HTML file and include a JS folder with all the js files referenced. You can find these by downloading three.js here. You will also need to include the scene.js file in the js folder.
  1. Enjoy!

Finished webapp

Here is a link to the finished webapp