Javascript three.js-如何让相机在拍摄过程中观察对象

Javascript three.js-如何让相机在拍摄过程中观察对象,javascript,canvas,3d,webgl,three.js,Javascript,Canvas,3d,Webgl,Three.js,因此,我正在尝试使用tweens来根据场景中单击的对象在摄影机的fov之间切换,这很好,但现在我希望它做的是让摄影机将其焦点切换到单击的对象,这不起作用。以下是我的点击代码: function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.

因此,我正在尝试使用tweens来根据场景中单击的对象在摄影机的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();
    }
}
以及我的tween/摄像机运动代码:

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

渲染器调用THREE.camera.update(),默认情况下将摄影机的旋转设置为lookAt THREE.camera.target()(这是一个3.Object3D)而不是执行

camera.lookAt( camTarget );
……试试

camera.target.position.copy( camTarget );
我不确定我是否了解camTarget是如何变粗的,或者它是否应该切换到新对象


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

遗憾的是,从2020年2月的three.js版本112开始,camera.target不再工作。jb

啊-是的,让它查看正确位置的问题是我把它位于事件处理程序中,而不是动画循环中.很好的捕捉。至于它将如何变粗,我不确定。我认为,通过将其放入动画功能中,当相机移动其fov时,注视功能也会动态变化,从某种意义上说,使其看起来像变粗。我想我可能必须实际移动相机,而不是改变fov才能工作。那“不过还是nks。@Mikaelementger-为什么不在事件处理程序中执行太多操作呢?”?