Tween js interpolation not working

Questions
1

I want to change camera tween interpolation from linear to Bezier.

but interpolation not updating.
as you see in below image camera path is linear.

image
image880×659 6.44 KB 

var cameraTween = function (newPosition, newRotation) {
    if(this.scene.getObjectByName('camerapath')){
      this.scene.remove(this.scene.getObjectByName('camerapath'))
    }
    const pathObj =  new THREE.Object3D()
    pathObj.name = 'camerapath'
    scope.scene.add(pathObj)
    this.camera.zoom = 10
    this.camera.updateProjectionMatrix ()
    this.controls.update();

    var tween1 = new TWEEN.Tween(this.camera.position)
      .to({
        x: newPosition.x,
        y: newPosition.y,
        z: newPosition.z
      }, 500)
      .onUpdate(() => {
        
        const geometry = new THREE.SphereGeometry(1, 32, 32);
        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
        const sphere = new THREE.Mesh(geometry, material);
        scope.scene.getObjectByName('camerapath').add(sphere);
        
        sphere.position.copy(scope.camera.position.clone())
      })
      .interpolation(TWEEN.Interpolation.Bezier)

      // .easing(TWEEN.Easing.Sinusoidal.In)
      .start()
      .onComplete(function () {
        // controls.enabled = true
      });
      console.log(tween1);

    var tween2 = new TWEEN.Tween(this.camera.rotation)
      .to({
        x: newRotation.x,
        y: newRotation.y,
        z: newRotation.z
      }, 500)
      // .easing(TWEEN.Easing.Sinusoidal.In)
      .start()
      .onComplete(function () {
        if (toggleGrid) {
          scope.gridHelper.visible = true
          scope.gridHelper2.visible = true
        }
        scope.controls.enabled = true
      });
  }
2

My understanding is that when you set .interpolation(TWEEN.Interpolation.Bezier), this’ll change how it interpolates over time. So if you plot the speed over time, that’s the curve that’s bezier. For any interpolation the camera will always follow a straight path in this example.

I think what you’ll want to do is generate a bezier curve (using something like this? Bezier.js, for doing Bezier curve things), get a list of points on that curve, and then move the camera along those points.

3

I think interpolation of time is done through Easing function.