Three.js tweened value doesn't arrive at target, instead completes but stays at initial value

Question

I'm trying to use Tween in my WebGL project ( http://eyesonmars.com/ ) to move the to a new position smoothly. However, I haven't yet been able to get Tween to work for me.

Instead of Tweening the value of the camera.position.x from -3 to -10 over a period of 3 seconds it simply sends the camera's position to x=-3 and does not continue. I have also confirmed that the Tween object believes it has completed it's task by having Tween's .onComplete() pop up an alert (I have since removed that alert so it is not in the current code).

Here is the code I'm using and it can be found at http://eyesonmars.com/libs/EOM_Utils.js

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 I've summarized how I am testing the code and what should've been happening according to what I think I know.

What IS happening: Typed into browsers JavaScript console:

input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -3

What SHOULD happen (according to me): Typed into browsers JavaScript console:

input: camera.position.x
output: 0.5
input: myAnimate()
output: undefined
input: camera.position.x
output: -10

I have tried different variations of the tween and also researched solutions online and my O'Reilly book. I'm glad to hear any suggestions for how I can post my question more accurately.

Thank you in advance for any help you can provide.

score 1 · Answer 1 · answered May 17 '15 at 19:33

1

Tween's update function require time!???? when u using with 3d render function "myAnimate" you need to pass time parameter...

function myAnimate(time)
{


    if(!myTween.onComplete())
    {
    requestAnimationFrame( myAnimate);
    }
    myTween.update(time);


}

answered May 17 '15 at 19:33

Navid Golforoushan

508
5
3

Note that passing in the time is always needed, not only in a 3d render method. In a very simple example, just moving a div element on an HTML page, it is also required to pass in + new Date(), as @Gero3 has pointed out. I find it strange that this is not in the examples, or did I just overlook it? – Bart McLeod Jul 05 '16 at 15:02

Gero3 · Answer 2 · 2012-11-13T15:20:25.057

0

tween doesn't work on integers

function zoomOutCamera()
{
    var position, target;

    // app.camera.position.z = 10;

    position = { x:-3.0};
    target = {x:-10.0};
    myTween = new TWEEN.Tween(position).to(target, 3000);

    myTween.onUpdate(function(){
        // alert(position);
        app.camera.position.x = this.x;
    });

    // myTween.onComplete(bananaphone(position));

    myTween.start(+new Date());
}


function myAnimate()
{


    if(!myTween.onComplete())
    {
    requestAnimationFrame( myAnimate);
    }
    myTween.update(+new Date());


}

edited Nov 13 '12 at 15:20

answered Nov 13 '12 at 14:16

Gero3

2,817
1
22
21

Thank you very much for the quick response. I have incorporated the changes to make sure the variable is a float and it is doing something. However, now the value goes to NaN. I'm actively looking for a solution but I thought I'd post so you know the immediate result. – benrobot Nov 13 '12 at 14:36
sorry it seems that it needs to be this in the callback instead of the position: myTween.onUpdate(function(){ // alert(position); app.camera.position.x = this.x; }); – Gero3 Nov 13 '12 at 14:44
I have incorporated the changes suggested in Gero3's answer into the same website http://www.eyesonmars.com To see the result it requires myAnimate2() <-- notice the 2 in the new function. This sets the value of camera.position.x to NaN. Changing the camera.position.x back to a number brings the photos back. Once again thank you so much for any and all help. – benrobot Nov 13 '12 at 14:47
I have just incorporated the latest into myAnimate2(), changed from position.x to this.x. The result on the camera's value goes to NaN in both cases. I will be stepping away from the computer for about 30 minutes so I may respond as quick as I am now. Thank you so much for your time. – benrobot Nov 13 '12 at 14:54
I've updated it again. It should get the time also in start and update() – Gero3 Nov 13 '12 at 15:25
Awesome, even more progress. It makes it to the target now, but gives a TypeError. I'm continuing to debug it, just keeping you in the loop. Also, I have updated the webserver with the time component. – benrobot Nov 13 '12 at 15:30
That works!!! At least once. I'm still trying to figure out what is going on with the requestAnimationFrame event hadling but it seems that calling `myAnimate2()` only works once. But I'm not sure why it won't run again. Also, I tried passing a variable into the target but it went back to the state when it was trying to send integers to tween. I have updated the website with the event handler for requestAnimationFrame and others. Once again, thank you so much for your help. – benrobot Nov 13 '12 at 16:56
What I mean by "it only works once" is that after I have executed `myAnimate2()` from the command line once, I press the 'W' key to fly back towards the images and then use the console to try `myAnimate2()` again. The second `myAnimate2()` command jumps to the target instead of slowly tweening. – benrobot Nov 13 '12 at 17:04

Three.js tweened value doesn't arrive at target, instead completes but stays at initial value

2 Answers2