When utilizing the TWEEN function within three.js, I have noticed that it is mainly used for tweening objects.
Although I can successfully tween the camera's position, I am looking to also tween the orbit control to mimic following a target while the camera is on a dolly.
Currently, the camera position is being tweened with the following code:
var xTarget = 0;
var yTarget = 0;
var zTarget = 0;
function setupCamTween(xTarget, yTarget, zTarget){
var update = function(){
camera.position.x = current.x;
camera.position.y = current.y;
camera.position.z = current.z;
}
TWEEN.removeAll();
var current = { x: myCameraX, y: myCameraY, z: myCameraZ };
var target = { x: xTarget, y: yTarget, z: zTarget};
console.log("moving cam");
var camTween = new TWEEN.Tween(current).to(target, 1000);
camTween.easing(TWEEN.Easing.Quadratic.InOut);
camTween.start();
camTween.onUpdate(function(){
camera.position.x = current.x;
camera.position.y = current.y;
camera.position.z = current.z;
});
}
setupCamTween(0, 900, 4000);
After setting the camera position, I proceed to adjust the target on the orbit using this code:
controls.target.set(0, myCameraY, 2000);
controls.update();
However, when I execute this, the camera tweens to the location and then abruptly jumps to the target controls point.
To eliminate this abrupt jump when the orbit control is set, I formulated a function to tween the orbit control as follows:
function orbitCam(){
var update = function(){
controls.target.x = current.x;
controls.target.y = current.y;
controls.target.z = current.z;
}
//TWEEN.removeAll();
var current = { x: myCameraX, y: myCameraY, z: myCameraZ };
var target = { x: 0, y: 200, z: 0};
var orbitTween = new TWEEN.Tween(current).to(target, 2000);
orbitTween.easing(TWEEN.Easing.Quadratic.InOut);
orbitTween.onUpdate(function(){
controls.target.set.x = current.x;
controls.target.set.y = current.y;
controls.target.set.z = current.z;
});
}
However, when I invoke this function, it does not produce any noticeable effect. I am thus exploring the possibility of tweening the setting of the target for the orbit control. Any guidance on this matter would be greatly appreciated.
In my animation function, I am calling the controls update:
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
controls.update();
}
Although I managed to make the following code work, I am faced with the drawback of losing all orbit control after the target has been set:
var xTarget = 0;
var yTarget = 0;
var zTarget = 0;
var tweenDuration = 0;
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.x = controls.object.position.x;
controls.target.y = controls.object.position.y;
controls.target.z = controls.object.position.z;
controls.target.x = current_target.x;
controls.target.y = current_target.y;
controls.target.z = current_target.z;
});
}