Three.JS rotate projection so that the y axis becomes the z-axis
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.
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/
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.