# Mouse can't move after tween to position

**URL:** https://discourse.threejs.org/t/mouse-cant-move-after-tween-to-position/32709
**Category:** Questions
**Tags:** camera, orbit-controls, tween
**Created:** [December 15, 2021, 10:25pm UTC](https://discourse.threejs.org/t/mouse-cant-move-after-tween-to-position/32709 "2021-12-15T22:25:55Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![paramfoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paramfoo/32/22793_2.png) [@paramfoo](https://discourse.threejs.org/u/paramfoo)
#### Post date: [December 15, 2021, 10:25pm UTC](https://discourse.threejs.org/t/mouse-cant-move-after-tween-to-position/32709/1 "2021-12-15T22:25:55Z")

</div>

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

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

```

I find these two cords from orbit control event listener

```javascript
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:

```javascript
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()

    })

  }

```

---

<div class="post-metadata">

### Author: ![D13](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@D13](https://discourse.threejs.org/u/D13)
#### Post date: [December 22, 2021, 8:44pm UTC](https://discourse.threejs.org/t/mouse-cant-move-after-tween-to-position/32709/2 "2021-12-22T20:44:00Z")

</div>

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

```javascript
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:

```javascript
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!

---

<div class="post-metadata">

### Author: ![paramfoo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paramfoo/32/22793_2.png) [@paramfoo](https://discourse.threejs.org/u/paramfoo)
#### Post date: [December 22, 2021, 11:31pm UTC](https://discourse.threejs.org/t/mouse-cant-move-after-tween-to-position/32709/3 "2021-12-22T23:31:07Z")

</div>

> [@D13](#):
>
> `someObject.position`

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