three.js - 如何让相机在补间期间查看对象

Posted 2023-02-27

【中文标题】three.js - 如何让相机在补间期间查看对象

【英文标题】：three.js - how to make camera look at an object during a tween

【发布时间】：2012-05-14 07:32:16

【问题描述】：

所以我正在尝试根据在场景中单击的对象使用补间来补间相机的 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”向量。

【参考方案1】：

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

camera.lookAt( camTarget );

...试试...

camera.target.position.copy( camTarget );

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

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

【讨论】：

啊 - 是的，让它查看正确位置的问题是我将它放在事件处理程序中，而不是动画循环中。我能够使用lookAt() 而不是copy()。不错的收获。至于如何补间，我不确定。我认为通过将它放在一个动画函数中，当相机移动它的 fov 时，lookAt 函数也会动态变化，从某种意义上说，它看起来好像在补间。我想我可能不得不实际移动相机而不是改变 fov 才能工作。不过再次感谢。

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

【参考方案2】：

遗憾的是，从 2020 年 2 月的 three.js 版本 112 开始，camera.target 不再有效。 jb