26

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?

Amiga500
  • 5,874
  • 10
  • 64
  • 117
Mahmudur Rahman
  • 640
  • 1
  • 6
  • 23

2 Answers2

27

You can set the up vector of the camera using

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

Then, it will work like you expect.

inet123
  • 764
  • 6
  • 10
  • 1
    IT is better to completely chagne the coordinate system as said in https://stackoverflow.com/a/58554774/5202815 – yooneskh Dec 20 '21 at 21:25
23

The answer above works in simple case, but if you wish for example to use the editor, you better set before doing anything

THREE.Object3D.DefaultUp = new THREE.Vector3(0,0,1);

So any new object will also use this convention. Using the previous answer, I struggled in the editor on on all the implications around the controls, saving the objects etc...

Please note that if you use a grid you still have to rotate it so that it covers XY plane instead of XZ

var grid = new THREE.GridHelper( 30, 30, 0x444444, 0x888888 );
grid.rotateX(Math.PI / 2);
Marc Nicole
  • 371
  • 2
  • 3
  • 1
    Even with your extra code, some things, e.g. [`BoxGeometry`](https://threejs.org/docs/#api/en/geometries/BoxGeometry), seem like they hard-code 'up' (e.g. `height`) as the y-axis. – Kenny Evitt Mar 12 '22 at 03:31
  • Anyone know the equivalent code for `react-three-fiber`? – Anson Kao Feb 13 '23 at 09:22