Tween camera target in three.js

0
votes

I have this code that works well:

function onMouseMove( event ) {

        window.onmousedown = function() { 

            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.

I've been digging around here quite a bit, but nothing addresses a camera tween - at least for a valid version of threejs

Thank you!

2
three.js
From the example it isn't really clear what you want to do. Could you add a paragraph to that effect? There seems to be something odd with how you compute that lookAt-position, but I can't tell what it is, because I don't know how it's supposed to work. – Martin Schuhfuß
I'm trying to smooth the transition of camera lookat. Regarding threejs, I'm using an orbit control example, but instead of the mouse movement changing what the camera is looking at, I click on an area and the camera looks at that area. I just want to smooth that action.But after the replies, I'm even not sure what camera.lookat really is. – edasac
That is quickly answered: object3d.lookAt() is a function that updates the object's rotation (more precisely it's quaternion) to make the object face the specified point while maintaining a specified up-direction. – Martin Schuhfuß

2 Answers

1
votes

I recommend you get acquainted with linear interpolation, or more commonly known as "lerp". The THREE.Vector3 class has a lerp function that you could use to interpolate between a starting point and an ending point:

var camPos = new THREE.Vector3(0, 0, 0); // Holds current camera position
var targetPos = new THREE.Vector3(10, 10, -10); // Target position
var origin = new THREE.Vector3(0, 0, 0); // Optional origin

function animate(){
    // Interpolate camPos toward targetPos
    camPos.lerp(targetPos, 0.05);

    // Apply new camPos to your camera
    camera.position.copy(camPos);

    // (Optional) have camera look at the origin after it's been moved
    camera.lookAt(origin);

    // render();
}

In the above example, your animate() function is called once per frame, and the camera will travel 5% towards targetPos per frame.

If you change targetPos, the camera will animate towards its new target value.

I recommend you first get acquainted with lerping before you start bringing in third-party libraries like TWEEN.js or others.

0
votes

just for smoothing the movement, this might already help you:

// keep this outside of the event-handler
var lookAtPosition = new THREE.Vector3();
var lookAtTween = new TWEEN.Tween(lookAtPosition);

// as lookAt is not a property we can assign to we need to 
// call it every time the tween was updated:
lookAtTween.onUpdate(function() {
  camera.lookAt(lookAtPosition);
});

window.onmousedown = function() { 
  // do your thing to compute pos
  // instead of `camera.lookAt(pos)`, do this:
  lookAtTween
    .stop() // just in case it's still animating
    .to(pos, 500) // set destination and duration
    .start(); // start the tween
};