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

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.