Reset camera using OrbitControls.js

Question

I\'m using OrbitControls.js to allow mouse interaction. I\'m adding a button into the scene that allows to \"reset\" the camera to it\'s state where it was before any mouse

Answer 1

ah.adel is correct Pan operation will update the center of the camera controller. Therefore if you need to reset/restore the camera to a predefined camera, you need to set camera controller center also.

Following code is a simple code to store camera position, rotation and control center

var camToSave = {};
camToSave.position = camera.position.clone();
camToSave.rotation = camera.rotation.clone();
camToSave.controlCenter = controls.center.clone();

Use this function to restore camera later.

function restoreCamera(position, rotation, controlCenter){
    camera.position.set(position.x, position.y, position.z);
    camera.rotation.set(rotation.x, rotation.y, rotation.z);

    controls.center.set(controlCenter.x, controlCenter.y, controlCenter.z);
    controls.update();

    render();
}

Call restoreCamera function to restore saved camera.

restoreCamera(camToSave.position, camToSave.rotation, camToSave.controlCenter);

Hope this will help to anyone who having this problem

Answer 2

Pan operation is updating vector called this.center , you need to reset it to see pan method ,

this.center.add( distance );

set this method to:

this.resetCamera = function ( ) {
        this.object.position.x= camera_initial_position.xPosition;
        this.object.position.y = camera_initial_position.yPosition;
        this.object.position.z = camera_initial_position.zPosition;
        this.center.x= camera_initial_target.x;
        this.center.y= camera_initial_target.y;
        this.center.z= camera_initial_target.z;
    };

and then the update method will keep the camera looking at the center vector.

Answer 3

You can reset the camera when using OrbitControls like so:

controls.reset();

three.js r.71