ThreeJS flip reversed X axis (left handed coordinate system)

user_3570796 0
Viewed 1157

I'm trying to create this 3D tile system world merged from smaller 3D objects - in order create these we use another application made in Unity which loads all small 3D assets separate and may be used to create your new model. Upon saving these model files there will be a JSON file created which contains all scales, positions, rotation etc. of all used 3D models.

We have decided to use this system of 'North, East, South, West' to make sure everything will look good in production. However now when we're trying to render these same JSON files in ThreeJS we have noticed the X axis is reversed compared to the Unity application that we're using .

What we want is this:

  • North is increasing Z value (north and south are fine)
  • East is increasing X value
  • West is decreasing X value

At the moment this is what's going wrong in ThreeJS:

  • East is decreasing X value
  • West is increasing X value

What we already have tried is this:

  • mirror / flip the camera view
  • when a coordinate drops below 0 we make it absolute (-10 will be 10)
  • when a coordinate is above 0 we make it negative (10 will be -10)

But nothing of the above had the desired effect. Reversing the coordinates with code brings other problems when it comes to scaled, rotated objects that are smaller or larger than 1x1x1 size. Ideally would be that we don't have to change our coordinates and that still can be used as a solid reference by changing the direction of the X axis from the left side to the right side of 0,0,0

Currently ThreeJS uses the 'right handed coordinate system' and what we desire is a left handed coordinate system. Is this something that is possible to configure within ThreeJS?

Anyone an idea what i can try except flipping all X coordinates?

enter image description here

mirror three.js reverse axis 3d
2 Answers

It's not something you can configure in three.js or Unity. Different file formats typically have a notional coordinate system built into them. GLTF, for example, is represented in a right-handed coordinate system. It's the responsibility of the format importers and exporters to handle the conversion -- this is what the builtin three.js importers do.

I would suggest using an existing format such as GLTF to represent your scene (there is an existing Unity exporter available and an importer available for three.js).

Or if you'd like to retain control over your own file format you can do the left to right handed coordinate system conversion yourself either at export from Unity or import to three.js. Looking at your image it looks like you'll want to multiple all of the X values by -1.0 to get them to look the same. You'll want to save your rotations as quaternions, as well, to avoid rotation order differences.

Of course you could always just scale the whole scene by -1.0 on X but that may make it difficult to work with other parts of three.js.

user_98388910

I would consider to apply a (-1, 1, 1) scale to the root of your "Unity exported scene", this way you can still keep the other part of your scene unchanged.

obj3d.scale.set(-1, 1, 1);
user_44765010
Related