Tween Shaking Issue

Questions
1

Hi I am using tween.js to tween the camera position. But it is not moving smoothly. There is a big shaking. I am giving my tween settings and my renderer settings below. Please help me to solve this.

this.tweencamera = function (xTarget, yTarget, zTarget, tweenDuration) {
    TWEEN.removeAll();
    console.log("tweening");
    let camNewPosition = { x: xTarget, y: yTarget, z: zTarget };
    let targetNewPos = { x: xTarget, y: yTarget, z: 0 };

    var camTween = new TWEEN.Tween(camera.position)
      .to(camNewPosition, tweenDuration)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onComplete(function () {
        camera.position.copy(camNewPosition);

        controls.enabled = true;
      })
      .start();
    var targetTween = new TWEEN.Tween(controls.target)
      .to(targetNewPos, tweenDuration)
      .easing(TWEEN.Easing.Quadratic.InOut)
      .onComplete(function () {
        controls.target.copy(targetNewPos);

        controls.enabled = true;
      })
      .start();
  }

renderer settings

function render() {
      renderer.render(scene, camera);
    }
    function animate() {
      render();
      if (orbitcontrol !== undefined) {
        orbitcontrol.update();
      }
      TWEEN.update();
      requestAnimationFrame(animate);
    }
2

Hi!
Would be cool to provide an editable live code example, that demonstrates the issue.

1 Like
3

Sure. Can you please share an empty jsfiddle or codepen with tween.js and three.js Because, I dont know to create that in those online workspaces

4

Here you are: https://jsfiddle.net/prisoner849/rbujqv3f/

5

Hi, @prisoner849 . I don’t know why that issue is not produced in this sample live example.

I am sharing here the screen recorded video of the issue, Please help me, if you can identify without live example