CODEWITHSUNDEEP
javascriptthree.js
Pete Kozak
Pete Kozak

Reputation: 623

THREE.js weird rotation about X

So here's the full code in jsFiddle:

http://jsfiddle.net/73v15kb6/1/

Rotating about Y and Z is as I would expect it to be, same thing with all the transitions. When I try to rotate about X axis, it looks like THREE.js is doing something special to make it look "more cool" - but that's not what I want to achieve.

Reading similar topics I'm sure it's something to do with my rotateX function:

camera.position.y = y * cos - z * sin;
camera.position.z = y * sin + z * cos;
camera.lookAt(scene.position);

When I initiate the 3d world I set the camera's coordinates with the following values, just to keep the desired view:

camera.position.x = -60;
camera.position.y = 30;
camera.position.z = 0;

Has anyone got a clue what I'm doing wrong? Thanks a lot!

Upvotes: 0

Views: 250

Answers (2)

Pete Kozak
Pete Kozak

Reputation: 623

Thanks Sen Jacob for fixing my fiddle!

I found a solution, so to have this working as I wanted - that camera always looks at the center point (0,0,0) and all the rotations of the word happens around the axis, I had to do the following for each rotation:

for rotZ and rotY

camera.up = new THREE.Vector3(0,1,0);
camera.lookAt(new THREE.Vector3(0,0,0));

for rotX:

camera.up = new THREE.Vector3(1,0,0);
camera.lookAt(new THREE.Vector3(0,0,0));

Notice the difference in up vector between X and Y&Z.

Upvotes: 0

Sen Jacob
Sen Jacob

Reputation: 3442

I'm new to THREE.js, (In fact, this is my first time working with it), so I might not explain it properly :(

The part THREE.js did to make it look "more cool" was the camera.lookAt method. 

camera.lookAt(sphere.position);

Here is the sample (modified) http://jsfiddle.net/73v15kb6/3/

Try to play around with the animate function for each axis and try with the lookAt option enabled. Playing with it for some time will give you the concept. :) 

function animate() {
    requestAnimationFrame(animate);
    rotateX(5); // Try with Y & Z; (also with toggling lookAt())
}

The lookAt function may make the transformation functions seem weird since even if the camera transform as expected, the rendering area will still be the same.

Upvotes: 1

Related Questions