javascript - three.js - 如何让相机在补间期间注视对象

Question

所以我正在尝试使用补间动画根据在场景中单击的对象来补间相机的 fov，效果很好，但现在我想要它做的是让相机将其焦点切换到单击的对象不起作用。这是我的点击代码:

function onDocumentMouseDown( event ) {
    event.preventDefault();

    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( objects );
    if ( intersects.length > 0 ) { //We've clicked a certain object

        camTarget = intersects[0].object.position; //HERE'S THE VECTOR3 I WANT TO LOOK AT
        camTween.start();
    }
}

和我的补间/相机移动代码:

var camUpdate = function(){
    camera.fov = currentFov.fov;  //WORKING
    camera.lookAt(camTarget); //NOT WORKING
    camera.updateProjectionMatrix();
}

var currentFov = { fov: camera.fov };

TWEEN.removeAll();
camTween = new TWEEN.Tween(currentFov).to({fov: +zoomInFov},tweenTime).easing(camEase).onUpdate(camUpdate);

相机正在正确地补间视野，但它似乎始终指向相同的方向，而不是切换到 lookAt 命令中指定的“camTarget”向量。

Answer 1

渲染器调用 THREE.Camera.update()，它默认设置相机的旋转以查看 THREE.Camera.target(这是一个 THREE.Object3D)。而不是做...

camera.lookAt( camTarget );

...尝试...

camera.target.position.copy( camTarget );

我不确定我是否遵循了补间 camTarget 的方式，或者它是否应该切换到新对象？

旁注:建议不要在事件处理程序中执行繁重的计算 - 在最好的情况下，您可以在事件处理程序中设置一个标志并在渲染循环中进行处理。