[SOLVED] Tween.js Not Calling onUpdate Function

Issue

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?

Solution

Tween.js needs to be passed the elapsed time, not a delta time. Passing a running elapsed time fixed the problem.

Also, it’s supposed to be passed an object containing the value you want interpolated. It looks like passing the value itself doesn’t work. I had success with this:

let tweenElement = {
                x: this.tweenInfo.pos.x,
                y: this.tweenInfo.pos.y,
                item: this
            }

this.tweenInfo.tweenUp = new TWEEN.Tween(tweenElement)
                .to({y : this.tweenInfo.newPos.y}
                    , this.tweenInfo.movementTime * 0.5 * 1000)
                .easing( TWEEN.Easing.Cubic.InOut )
                .onUpdate(function(){
                    this.item.updateYPos(tweenElement, this)
                })
                .onComplete(function(){
                    this.item.tweenUpComplete();
                });

Answered By – reggie3

Answer Checked By – Terry (BugsFixing Volunteer)