Migpics - 1 year ago 176
Javascript Question

# How to restart Orbit Controls after target is set

I set a new target for my

THREE.OrbitControls
on a mouse click event and it works great. But after the camera pans to the new location, I lose all interaction with the mouse.
I assume I have to reset the orbit controls but I'm not sure if this is the solution or if this is a bug.
Any ideas?

        var xTarget=0;
var yTarget=0;
var zTarget=0;
var tweenDuration=0;


//the following function is called on a mouse down event

function setupCamTween(xTarget,yTarget,zTarget,tweenDuration){

var update  = function(){
camera.position.x = current_position.x;
camera.position.y = current_position.y;
camera.position.z = current_position.z;
controls.target.x = current_target.x;
controls.target.y = current_target.y;
controls.target.z = current_target.z;

}

//TWEEN.removeAll();

var current_position = { x: myCameraX, y : myCameraY, z : myCameraZ };
var target = { x : xTarget, y : yTarget, z : zTarget};

var current_target = { x: myCameraX, y : myCameraY, z : myCameraZ };
var new_target = {x : xTarget, y : yTarget, z : zTarget};

console.log("moving cam");

var camTween = new TWEEN.Tween(current_position).to(target, tweenDuration);
camTween.start();

var targetTween = new TWEEN.Tween(current_target).to(new_target, tweenDuration);
targetTween.start();

camTween.onUpdate(function(){
camera.position.x=current_position.x;
camera.position.y=current_position.y;
camera.position.z=current_position.z;

});

targetTween.onUpdate(function(){
controls.target.set.x = current_target.x;
controls.target.set.y = current_target.y;
controls.target.set.z = current_target.z;
});

camTween.onComplete(function(){
console.log(camera.position);  //I added these console logs to see what's happening with the code.
myCameraX=xTarget;//here I am trying to set a new original point for the camera targets.
myCameraY=yTarget;
myCameraZ=zTarget;
console.log(myCameraX);
controls.reset();  //This resets the orbit but also moves the camera.  So at least it's partially working.
console.log("Tween Complete.  Resetting orbit");
console.log(camera.position); //just to see where the camera is.
});

}


You can view the partially working demo here:

http://www.kreativperspektiv.com/pb2/charts.html
Click on one of the big round buttons.

You cannot update target like this:

controls.target = newTarget;

controls.target.copy( newTarget );

new TWEEN.Tween(camera.position).to(newPosition, tweenDuration);