three.js - 如何在 tween 动画期间使相机注视一个对象

Question

我正在尝试使用缓动动画来根据场景中点击的对象缩放相机的视野，这一部分已经成功了，但是现在我想让相机将焦点切换到被点击的对象上，但是实现不了。以下是我的点击代码：

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”向量。

- mheavers

Answer 1

渲染器调用THREE.Camera.update()，默认情况下将相机的旋转设置为朝向THREE.Camera.target（它是一个THREE.Object3D）。而不是这样做...

camera.lookAt( camTarget );

...尝试...

camera.target.position.copy( camTarget );

我不确定camTarget是如何缓动的，或者它只是应该切换到新对象？

顺便说一下：最好不要在事件处理程序中执行大量计算 - 在最好的情况下，您可以在事件处理程序中设置标志，并在渲染循环中处理。

- MikaelEmtinger

---

啊-是的，让它看向正确位置的问题是我把它放在了事件处理程序中而不是动画循环中。我能够使用lookAt()而不是copy()。很好的发现。至于它将如何被缓动，我不确定。我认为通过将其放入一个动画函数中，随着相机移动其fov，lookAt函数也会动态改变，使其看起来像是缓动。我想我可能必须实际移动相机而不是改变fov才能使其工作。再次感谢。 - mheavers

@MikaelEmtinger - 为什么不应该在事件处理程序中做太多的事情？ - Neil

Answer 2

可悲的是，从2020年2月的three.js 112版本开始，camera.target不再起作用。jb

- den232