How can I set Z up coordinate system in three.js?
Solution 1
You can set the up vector of the camera using
camera.up.set(0,0,1);
Then, it will work like you expect.
Solution 2
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);
Related videos on Youtube
Mahmudur Rahman
Back-end developer with almost 2 years of experience in web based 3d virtual reality platform where remote teams can easily launch and conduct product reviews capturing and recording immediate feedback from participants.Have a good understanding of Algorithms, Data Structure & OOP with many years of problem-solving experience.
Updated on June 23, 2022Comments
-
Mahmudur Rahman almost 2 years
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:
- Three.JS rotate projection so that the y axis becomes the z-axis . It doesn't work.
- 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.
- Changing a matrix from right-handed to left-handed coordinate system
- 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?
-
pailhead almost 7 yearsPutting aside the fact that three.js uses the right handed system, you could try scaling your scene in negative z, and flipping the render order of faces.
-
boxtrain over 6 yearsYou should accept the answer.
-
yooneskh over 2 yearsIT is better to completely chagne the coordinate system as said in stackoverflow.com/a/58554774/5202815
-
Kenny Evitt about 2 yearsEven with your extra code, some things, e.g.
BoxGeometry
, seem like they hard-code 'up' (e.g.height
) as the y-axis.