Tween.js Not Calling onUpdate Function

Question

I am using tweenjs and Typescript to change the x and y coordinates of a three.js cube. I created the following tween to change the x position of an item of class "FallingItem".

this.movementArcData.horzTween = new TWEEN.Tween(this.movementArcData.pos.x)
                .to(this.movementArcData.newPos.x, this.movementArcData.movementTime * 1000)
                .onUpdate(this.updateXPos)
                .onComplete(this.horzTweenComplete);

where "this.movementArcData" is an object containing the following:

• horzTween - the tween itself

• pos.x - the original position of the item

• movementTime - the time it takes to complete the movement, 2000 milliseconds

• updateXPos - a member function of the a FallingItem object with the following code:

  updateXPos(){ this.mesh.position.x = this.movementArcData.pos.x; console.log("update x: " + this.movementArcData.pos.x); }

horzTweenComplete - a member funtion of the FallingItem object with the following code:

horzTweenComplete(){
    this.movementArcData.horzTweenComplete = true;
}

Neither the updateXPos or horzTweenComplete callback is getting fired.

I am calling TWEEN.update in my render loop like so:

TWEEN.update(dt);

Since the tween's onComplete event never fires, the TWEEN.update is called constantly. What am I missing that is causing the tween not to work properly?

Answer 1

I had a similar case when TWEEN was not calling my onUpdate function. Found out I had to call window.requestAnimationFrame() in order to tell the browser that I, i.e. TWEEN, "want to perform an animation and requests that the browser call a specified function to update an animation before the next repaint."

function animate(time) {
    window.requestAnimationFrame(animate);
    TWEEN.update(time);
}

new TWEEN
        .Tween({ y: 0 })
        .to({y: 1000}, 700)
        .easing(TWEEN.Easing.Exponential.InOut)
        .onUpdate(function () {
            window.scrollTo(0, this.y);
        })
        .start();

animate();

The above example was taken from https://github.com/tweenjs/tween.js/blob/master/examples/00_hello_world.html.