34

Traditionally, in 3D projections, the Y-axis is the axis that represents "up and down". I learned to think of it, with other engines, as that axis being the Z-axis. What I was wondering was whether there is a way in Three.JS to make the Z-axis the "up/down" axis. If so, are there any consequences to it?

Here is a diagram of what I want: enter image description here

Alex Turpin
  • 46,743
  • 23
  • 113
  • 145
  • 8
    To me it seems the picture on the right has "x" and "y" in wrong positions. Shouldn't they be swapped? – Arman Jul 29 '15 at 06:41
  • Could you point me to where I could read more about this convention? I've never faced it :-/ – Kuba Jan 20 '16 at 08:03
  • @Arman did you find any solution to how it would work if I wanted to have the x and y axis swapped afterwards? – filip Oct 09 '21 at 21:41
  • @filip how do you mean? This picture is not a rotation of the axes, it is a mirror of "traditional" if you want to mirror things, I think you can scale them dimensionally to a negative number. – Arman Oct 10 '21 at 01:28

4 Answers4

48

You could just change the camera rather than the entire coordinate system. For example:

var WIDTH = 1024;
var HEIGHT = 768;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.z = 300;
camera.up = new THREE.Vector3( 0, 0, 1 );
scene.add(camera);

This changes the up vector for the camera to use Z-UP.

EDIT:

To illustrate an example, here's the jsfiddle you created slightly modified to call lookAt after setting the up vector: http://jsfiddle.net/NycWc/1/

jterrace
  • 64,866
  • 22
  • 157
  • 202
  • Thanks for the answer! I don't have time to test it now but will try soon. Does that have any consequences on other camera methods? Will I still be able to use `lookAt` normally and such? – Alex Turpin Dec 08 '11 at 15:40
  • Hmm, I would think that lookAt would still work, since it uses the camera's up vector: https://github.com/mrdoob/three.js/blob/master/src/cameras/Camera.js#L32 – jterrace Dec 08 '11 at 15:56
  • 1
    Maybe I'm doing something wrong, but I'd expect the camera to go up, instead it seems to left http://jsfiddle.net/NycWc/ – Alex Turpin Dec 08 '11 at 17:25
  • 1
    You have to call the ``lookAt`` *after* setting the ``up`` vector: http://jsfiddle.net/NycWc/1/ – jterrace Dec 08 '11 at 17:54
  • 2
    If you read this 9 year old answer take note it does not apply for newest releases of Threejs. Please refer to the `THREE.Object3D.DefaultUp` answer below – MacK Apr 14 '20 at 14:23
23

The following will achieve your desired result

THREE.Object3D.DefaultUp.set(0, 0, 1);

According to the documentation

.DefaultUp : Vector3

The default up direction for objects, also used as the default position for DirectionalLight, HemisphereLight and Spotlight (which creates lights shining from the top down). Set to ( 0, 1, 0 ) by default.

TerekC
  • 2,133
  • 3
  • 20
  • 22
  • 3
    This should be the correct answer, the accepted one just "hacks" the camera top value rather than whole coordinate system (affects all objects) which OP requested. – Tyathalae Nov 25 '19 at 08:41
  • X and Y will be swapped, though. – OZ_ Feb 13 '23 at 23:34
4

I had this issue with an object. Here's how I fixed it.

object.rotation.z = 90 * Math.PI/180;
object.rotation.x = -90 * Math.PI/180;

This took changed it's orientation in just the way you're asking.

-4

The xyz coordinate frame should always be set up with the right hand rule. Creating your own convention is simply not such a good plan and will cause a lot of confusion. You can rotate the coordinate frame at will but don't change the direction of the axis. If you really want to do what you display you can make an x,y,-z coordinate frame.

gijs van erp
  • 1