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

时间:2012-05-04 18:24:21

标签: javascript canvas 3d webgl three.js

所以我正在尝试使用补间根据场景中点击的对象来补间摄像机的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);

相机正在适当地补间视野,但它似乎始终指向与其始终指向的方向相同的方向,而不是切换到" camTarget" lookAt命令中指定的向量。

2 个答案:

答案 0 :(得分:13)

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

camera.lookAt( camTarget );

...尝试...

camera.target.position.copy( camTarget );

我不确定我是否遵循了如何修补camTarget,或者它可能只是应该切换到新对象?

附注:建议不要在事件处理程序中执行繁重的计算 - 在最好的世界中,您在事件处理程序中设置一个标志并在render循环中设置一个标志。

答案 1 :(得分:2)

不幸的是,自2020年2月的three.js版本112起,camera.target不再起作用。 jb