Migpics Migpics - 4 months ago 70
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.easing(TWEEN.Easing.Quadratic.InOut);
camTween.start();

var targetTween = new TWEEN.Tween(current_target).to(new_target, tweenDuration);
targetTween.easing(TWEEN.Easing.Quadratic.InOut);
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.

Answer

You cannot update target like this:

controls.target = newTarget;

That will break your controls.
Instead have to set target using the setter method or copy method:

controls.target.copy( newTarget );
controls.target.set( x, y, z ) // where x, y and z are the new values

UDPATE

If you want to use TWEEN, just try like this:

new TWEEN.Tween(camera.position).to(newPosition, tweenDuration);
new TWEEN.Tween(controls.target).to(newTarget, tweenDuration);
Comments