Away3D 3.6.0: Three JS exporter WIP

As a follow on to my recent Away3d AS3Exporter update post, I began to wonder whether I could write a similar exporter for Three JS. I’ve managed to make a reasonable amount of progress with this- the current version can export various Away3D primitives to their correct positions, but I’m struggling a little with translating the rotation and scale properties.

Here’s the code for the latest version, and here’s the swf which outputs the Three JS HTML file.

Clicking on the “export to 3JS” button generates the HTML file and copies the code to your clipboard. If you create a new text file in Notepad or similar, call it “exported.html” (the name doesn’t matter as long as the .html extension is there), paste in the code, save and open the html page. Note: this example doesn’t run in IE9 for me, so I’d advise opening it with Google Chrome. Alternatively, you can click here to open the resultant Three JS scene in your browser. The image below describes the problem with the Three JS scene:

As you can see there are a few issues with the exported HTML file.

The first problem is that the red x-axis is inverted in Three JS. This is because Away3D is a left-handed system whereas Three JS is a right-handed system. This means that the positions of the objects are correct asides from the fact they are inverted on the x-axis.

The second problem is that the primitives appear to be rotated +90 degrees around the x-axis. This seems to be due to the fact that the standard behaviour in Three JS is to build them from top to bottom along the z-axis, whereas the standard behaviour in Away3D is to build them from top to bottom along the y-axis.

I’ve attempted to resolve both of these issues in exporters.ThreeJSExporter in the following function:

private function getThreeJSMatrix( object3d:Object3D ):Matrix3D
  var m:Matrix3D = object3d.transform.clone();
  m.prependRotation(-90, Vector3D.X_AXIS);

  return m;

The function getThreeJSMatrix() is called just before an object3d is serialised and updates the object’s Matrix3D in an attempt to correct it’s orientation in the resultant Three JS scene. As you can see from the image below, this works to some degree, though the plane primitives are rendered upside down (hence are invisible from this viewing angle) and the primitives which had rotations applied to them are incorrectly rotated in the new coordinate space. Click here to open the resultant Three JS scene in your browser.

I’m hoping someone with a little more 3D knowledge will read this and help me to complete what should be a pretty neat little exporter.

Key questions:

  • Should I rotate the objects through -90 degrees or is there another way in Three JS to alter the rendering orientation (e.g. yUp = true in Away3D)?
  • Can someone provide the necessary matrix transformation code to translate rotation and scale properties from a left-handed to a right-handed system?
Thanks in advance! 🙂
This entry was posted in Away3D, Flash, Three JS. Bookmark the permalink.

3 Responses to Away3D 3.6.0: Three JS exporter WIP

  1. I m trying to do exactly the same thing

  2. Pingback: Away3D 4.0 Gold: AS3 and three.js exporters « Rob Silverton

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s