CODEWITHSUNDEEP
3dthree.jsprojection-matrix
Alex Turpin
Alex Turpin

Reputation: 47776

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

Upvotes: 34

Views: 27973

Answers (4)

jterrace
jterrace

Reputation: 67063

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/

Upvotes: 49

TerekC
TerekC

Reputation: 2243

The following will achieve your desired result:

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

According to the documentation:

.DEFAULT_UP : 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.

To learn more, see the source code.

Upvotes: 24

gijs van erp
gijs van erp

Reputation: 1

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.

Upvotes: -4

user1066619
user1066619

Reputation:

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.

Upvotes: 5

Related Questions