ThreeJS Object3D flickers when tweening with yoyo turned on.

[NyaNguyen]

ok, so I tested this and was able to reproduce the issue with this example:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const tween = new TWEEN.Tween(cube.position)
    .to({ x: 10 }, 4000)
    .easing(TWEEN.Easing.Linear.None)
    .yoyo(true)
    .repeat(Infinity)
    .start();

camera.position.z = 20;

const animate = function () {
    requestAnimationFrame(animate);

    TWEEN.update();

    renderer.render(scene, camera);
};

animate();

We can see the Object3D flickers each time it bounces back and forth. I'm not too sure if this is a TweenJS bug or there is something I need to do in ThreeJS to ensure the position does not somehow reset.

I attached a quick video of the problem. Tested with Firefox and Edge and got the same issue.

[NyaNguyen]

VID_20240221_211342.mp4

[mk965]

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

[cleverfrog]

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 :)

[NyaNguyen]

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

[trusktr]

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.

[NyaNguyen]

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...

[trusktr]

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

[NyaNguyen]

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.

[humodz]

@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

[humodz]

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

[trusktr]

Fixed in

• fix yoyo repeat #683

Released in v23.1.2