I've been experimenting with implementing Tween in my WebGL project at to smoothly move the camera to a new position. Unfortunately, I'm facing challenges getting Tween to function as desired.
When attempting to tween the camera.position.x value from -3 to -10 over 3 seconds, instead of transitioning smoothly, the camera's position jumps to x=-3 and stops there. Even after confirming through Tween's .onComplete() that the task is complete (though I have since removed this alert), the issue persists.
The code I am using can be accessed at this link:
function zoomOutCamera()
{
var position, target;
// app.camera.position.z = 10;
position = -3.0;
target = -10.0;
myTween = new TWEEN.Tween(position).to(target, 3000);
myTween.onUpdate(function(){
// alert(position);
app.camera.position.x = position;
});
// myTween.onComplete(bananaphone(position));
myTween.start();
}
function myAnimate()
{
if(!myTween.onComplete())
{
requestAnimationFrame( myAnimate);
}
myTween.update();
}
Below is a summary of how I'm testing the code and what actually occurs:
Current outcome when checking in browser's JavaScript console:
input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -3
Expected outcome according to my understanding:
input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -10
Despite trying different approaches to the tween and consulting online resources and my O'Reilly book, the problem persists. I would appreciate any suggestions on how to improve the accuracy of my question.
Thank you in advance for any assistance provided.