Tween Camera target / lookat

Questions
,
1

I have this code that works well:

function onMouseDown( event ) {
            
    var canvasPosition = renderer.domElement.getBoundingClientRect();

    var mouseX = event.clientX - canvasPosition.left;
    var mouseY = event.clientY - canvasPosition.top;

    var mouseVector = new THREE.Vector3 (2 * (mouseX / window.innerWidth) - 1,1 - 2 * (mouseY / 
       window.innerHeight), 1);
                
    mouseVector.unproject( camera );
    var dir = mouseVector.sub( camera.position ).normalize();
    var distance = - camera.position.z / dir.z;
    var pos = camera.position.clone().add( dir.multiplyScalar( distance ) );
                
     camera.getWorldDirection();
                
     camera.lookAt( pos );
      // camera.updateMatrixWorld(true);
                
     console.log(mouseVector);
     console.log(mouseX);
     console.log(mouseY);
                
     // render();

}

But I would like to smooth the movement. So I found the following code from the tween example, but not sure how to use it. In the above code, I get current camera lookat from one place, one format, and put the new camera look at in camera.lookat in a different format - neither of which seem to be standard x,y,z.

In the below code, the tween would have me change an properties (x,y,z) on a single item. which the unprojecting and normalizing of the camera do not accommodate:

new TWEEN.Tween( intersects[ 0 ].object.position ).to( { 
x: Math.random() * 800 - 400,

y: Math.random() * 800 - 400,

z: Math.random() * 800 - 400 }, 2000 )

.easing( TWEEN.Easing.Elastic.Out).start();

If there is a breakdown or something I can read, or actually work out problems to understand, I’d be grateful. I’ve read camera tutorials and matrix tutorials over and over for years, but my brain just can’t comprehend it.

2

Maybe this example helps you further: https://threejs.org/examples/#css3d_periodictable

Have a closer look at the .transform() function. At least, you will see how to properly use TWEEN.js for basic animations.

3

Thank you Mugen87. That helped tremendously, and I was able to get it working.

Unfortunately, it revealed another problem that I do not have the skill to remedy. It seems there is a rotation limit for both x and y in either direction. That does not work for my idea and I just don’t have the math ability.

4

I want to redo this using slerp or lerp, since at some point, I’ll need to move the camera in the direction the camera is looking at for a predetermined distance.

It’s also pretty clear I cannot slerp camera.lookat

Can I get appropriate camera rotation information from my “var position” so I can update the camera’s rotation instead of doing lookat? Is there some other way I should be tackling this?

I had some help here: https://stackoverflow.com/a/44769143/1507161 But it threw me off because I’m not changing position. Every relative example or answer is changing position or rotation. Should I be changing position instead of using lookat? lookat seems like the obvious choice, but I’m probably missing something.

5

Why do I get all these crazy gyrations? https://codepen.io/ndsp/pen/YQavxG

It’s ok if you stay close, but trying to rotate all the way around, it’s bad - especially on the y axis.

I found a quaternion route with lerp, but the result is the same as tween. I don’t think it does it when there isn’t interpolation.