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

Question

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:

Answer 1

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/

Answer 2

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.

Answer 3

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.

Answer 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.