Search code examples
javascriptjquerywebglthree.js

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?

Solution

  • 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)