CODEWITHSUNDEEP
javascriptjquerywebglthree.js
SeeDoubleYou
SeeDoubleYou

Reputation: 1273

Reset camera position/rotation when using TrackballControls

I have a webgl application with threejs. It uses TrackballControls to control the camera. I have a button which I want to use to reset the scene, so, the camera should go to the initial state. I currently have this (jquery):

$('#reset').click(function() {
    camera.position.set(0, 0 , 400);
    camera.rotation.set(0, 0, 0);
});

But strangely, when I log the position and rotation, they are not as they should be and the camera is not at the correct place. What am I doing wrong, is there a better way to do this?

Upvotes: 3

Views: 6466

Answers (4)

Mohammed Faiz
Mohammed Faiz

Reputation: 1

This question was asked a while back, but I encountered this issue and found a workaround to the latest TrackBallControls version. In addition to camera.position and camera.rotation,camera.up also had to be set to the desired coordinates.

When setting your reset coordinates, set all 3: position, rotation, and up. When switching to reset coordinates, set all 3 again. As I understand it, for this use case camera.up is important, moreso than camera.rotation. This is what helped me, hope this is useful.

See More: What effect does camera.up have in Three.js?

Upvotes: 0

vinay
vinay

Reputation: 11

Instead of changing the camera.rotation to (0,0,0) change the camera.up to (0,1,0). You can use Tween as well to animate it.

Upvotes: 1

SeeDoubleYou
SeeDoubleYou

Reputation: 1273

Until the bug is fixed (see comment on Yuval Adam's answer), a working (though dirty) solution is to remove the camera from the scene, then to create a new one, add controls to it and add the new camera to the scene.

Update: TrackballControls now has a reset() method. Call this after the tween completes and all is well! (https://github.com/mrdoob/three.js/commit/4f800f61809560c434bbbf12e76c3931e8e8c0fb)

Upvotes: 6

Yuval Adam
Yuval Adam

Reputation: 165172

The camera.position should always be up-to-date, make sure you're looking at the right camera and that it's not out of scope. Ideally, it should be a global var on the window.

Regarding the camera.rotation, you should check if your camera has:

camera.useQuaternion == true

Some controls set this on the camera as a prerequisite. If this is the case, the camera angle is set by the camera.quaternion and not by the camera.rotation. Granted, TrackballControls do not have this behavior (as of r49, at least).

Edit: As it seems from https://github.com/mrdoob/three.js/issues/821 there is indeed a bug with manually adjusting the camera that messes up the TrackballControls.

Upvotes: 1

Related Questions