javascriptgraphics3dthree.jswebvr

How can I set Z up coordinate system in three.js?


In three.js Y axis represent up and down and Z axis represent forward and backward. But I want Z axis to represent up and down and Y axis to forward and backward. Here is a image showing what I want:

I want to change the entire coordinate system in such a way that, if I rotate a mesh around y axis, it follows the new coordinate system not the traditional one.

Now, I have searched stack overflow and found this link:

  1. Three.JS rotate projection so that the y axis becomes the z-axis . It doesn't work.
  2. THREEJS: Matrix from Z-Up Coordinate System to Y-Up Coordinate System. This method just change the object or mesh y and z vertices but if I rotate it around y axis it rotates around the traditional y axis. I have to apply the matrix to the rotation matrix also to make it rotate like the new coordinate system.
  3. Changing a matrix from right-handed to left-handed coordinate system
  4. Reorienting axes in three.js fails when webpage is refreshed. This doesn't work also.

Is there any way I can make three.js to work like Z up coordinate system?


Solution

  • You can set the up vector of the camera using

    camera.up.set(0,0,1);
    

    Then, it will work like you expect.