3rd person camera rotate around player with mouse

Question

I'm trying to make a 3rd person camera for a game with THREE.js and Physijs (if that's important), and so far I have set it up so that the camera follows behind the player using cos and sin etc. but I want to make it so that the user can rotate the camera in any direction around the player (and zoom in and out of course), and then when the player starts moving slowly lerp/reset the camera position to behind the player, but I'm not sure how to do this in THREE.js, I don't think OrbitControls let's it reset the position (or does it)?

Answer 1

I would recommend what I found in this stackexchange answer, second part.

In this answer, it gives a link to this website, using it as an example of rotation using your mouse in THREE.js.

Essentially what this link does is create a new THREE.TrackballControls object:

controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 )

It then sets the controls, which you can change to your liking, like so:

controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.15;

controls.keys = [ 65, 83, 68 ];

This is all you really need to do, although you don't want to forget your event listeners.

Another example will be on threejs.org, where it shows you trackball controls and has a link to the source, instead of making you use developer tools in Chrome or whatever your web browser uses.

I'm unsure about zooming while rotating, but I'm pretty certain you can zoom at any point after you are done rotating.

I am however, pretty certain that OrbitControls lets you reset it. I think this code should work:

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;
};

As long as you set the function resetCamera to occur upon some key-press (I'm assuming), that should work. If not use this code:

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;
};