Mouse can't move after tween to position

Questions
, ,
1

Hi,
I have a tween function (please see code below) to pan camera to certain area. It works well, but mouse became really heavy to scroll in and out after tween. After some research I found the cause is it has really close cords with camera position and target position:

cameraPosition: [-20472.681897165796, 4480.34211787887, 7362.555231241536],
controlTarget:[-20464.22315037777, 3922.34212359485,6859.2531328649775]

I find these two cords from orbit control event listener

this.#controls.addEventListener("change", (e) => {
      console.log(e);
    })

To fix the issue, I tried:

  1. tween camera without target control
  2. correct control target after tween is finished

Result:

  1. I can’t tween to this area correctly without target position, is there a way to do this?
  2. I tried to put this.#control.target.set(0,0,0) inside onComplete() before control.update() but doesn’t work, target inside control object is not overwritten

Please give me some hints on how to fix the mouse issue or how to avoid finding a position have close camera position and target? Thank you!!

Here is my tween function which tween both camera and target:

tweenCameraTo = (to) => {

    TWEEN.removeAll()

    const [toX, toY, toZ] = to.cameraPosition

    const [targetX, targetY, targetZ] = to.controlTarget

    return new Promise((resolve) => {

      new TWEEN.Tween(this.#camera.position)

        .to({

            x: toX,

            y: toY,

            z: toZ,

          }, 3000)

        .easing(TWEEN.Easing.Quadratic.InOut)

        .onStart((_) => {

          this.#controls.enabled = false

          new TWEEN.Tween(this.#controls.target)

            .to( {

                x: targetX,

                y: targetY,

                z: targetZ,

              }, 3000)

            .easing(TWEEN.Easing.Quadratic.InOut)

            .onUpdate((_) => { this.#controls.update() })

            .start()

        })
        .onComplete((_) => {

          this.#camera.updateProjectionMatrix()

          this.#camera.updateMatrix()

          this.#controls.enabled = true

          this.#controls.update()

          resolve(to)

        }) .start()

    })

  }
2

I would run your TWEEN, and Controls, update(s) only once in the animation request. Like so:

function animate() {
    requestAnimationFrame( animate );    
    camera.updateMatrixWorld( true );                
    TWEEN.update();
    controls.update();
    render();
}   

function render() {
    renderer.render( scene, camera );
}

Then when you call your TWEENS or Control changes they will automatically update. Try:

TWEEN.removeAll();   

var animationSpeed = 700;
// create a new temporary mesh (never rendered) to hold your target position
var temp = new THREE.Mesh(); 
    temp.position.copy( someObject.position ); // temp.position.copy( 0, 0, 0 );
    temp.lookAt( someTarget.position ); // temp.lookAt( 0, 0, 0 ); 

    /* more temp modifications here if needed */
 
// tween your camera to your temp position
new TWEEN.Tween( camera.position ).to( temp.position, animationSpeed ).start();

// set target and controls
controls.target.copy( camera.position );
controls.reset(); 
// controls.update();

I used this in my scenes with no problems ( r118 - r135 ). If you need to modify the temp position some more before the TWEEN, this allows you to do that too. This should be all that’s needed to get your camera to move to a position and the controls to update to that position as well.

Honestly, the camera.updateMatrixWorld probably isn’t really needed.

Hope it helps!

3

thanks for your reply.
I tried your solution. Is this one object target position? coz otherwise it will tween to somewhere else…
and no point copying camera position to control later