Search code examples
3dthree.jsprojection-matrix

Three.JS rotate projection so that the y axis becomes the z-axis

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

Solution

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

    const WIDTH = 1024;
const HEIGHT = 768;
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const 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.

    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/