ThreeJS Object3D flickers when tweening with yoyo turned on. about tween.js HOT 11 OPEN

Thanks for your feedback, this is a known issue. #677

from tween.js.

from tween.js.

VID_20240221_211342.mp4

Hey @NyaNguyen - is that a cell phone video of a monitor displaying that demo for the flicker - or is that the actual canvas output? It has a cool postprocessing effect :)

from tween.js.

heh....umm..yeah, it's a cell phone filming the monitor with an overhead light shining on it. The flicker we see if what is actually rendered on the screen. ;D

from tween.js.

Until we can fix this, a workaround is to create two tweens, one going in the opposite direction, and chain them.

If you intend to only make it bounce back and forth linearly, another option is to simply increment on each frame like this (instead of using Tween.js):

let pos = 0
let direction = 1
function animate(time) {
  if (pos <= 0) direction = 1
  if (pos >= 1) direction = -1

  pos += direction * 5
}

Where you can replace 5 with a magnitude based on time and the previous time (delta time) for example.

from tween.js.

Oh no, a bandage solution! :P Hey, I decided to take a look at the code. Isn't the fix for this simply to move the following code at the bottom before the return true;?

            // properties transformations
            this._updateProperties(this._object, this._valuesStart, this._valuesEnd, value);

Seems to work...

from tween.js.

If it works and all tests pass, let's do it! Would you like to open a pull request?

from tween.js.

As I won't really know what I am doing with branches and stuff, I will abstain from doing any of that. ;D

After testing further, the file I edited was tween.umd.js. I simply copied the first this._updateProperties() method call over to the bottom as shown in the screenshot.

from tween.js.

@NyaNguyen

There's two issues with that fix:

• the _updateProperties call needs to be added before all three returns in .update()
• the callbacks (onUpdate, onRepeat, etc) will be called with the values of the previous update. The current behavior is for them to be called after the value is updated, which I tried to preserve in my pull request

from tween.js.

@trusktr Do you mind taking a look at #678 when you have the time?

from tween.js.