Javascript 三.js - 如何让相机在补间期间看对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10454182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
three.js - how to make camera look at an object during a tween
提问by mheavers
so I'm experimenting with using tweens to tween a camera's fov based on an object that is clicked on in the scene, which is working great, but now what I want it to do is to have the camera switch its focus to the object that was clicked, which is not working. Here's my code for the click:
所以我正在尝试使用补间根据在场景中单击的对象来补间相机的 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();
}
}
and my code for the tween / camera movement:
和我的补间/相机运动代码：
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);
The camera is tweening the field of view properly, but it appears to stay pointed in the same direction it always was pointed at, instead of switching to the "camTarget" vector specified in the lookAt command.
相机正在正确地补间视野，但它似乎一直指向它一直指向的同一方向，而不是切换到 lookAt 命令中指定的“camTarget”向量。
回答by MikaelEmtinger
The renderer calls THREE.Camera.update(), which sets the rotation of the camera by default to look at THREE.Camera.target (which is an THREE.Object3D). Instead of doing...
渲染器调用 THREE.Camera.update()，默认情况下将相机的旋转设置为查看 THREE.Camera.target（这是一个 THREE.Object3D）。而不是做...
camera.lookAt( camTarget );
...try...
...尝试...
camera.target.position.copy( camTarget );
I'm not sure I follow how camTarget is tweened, or maybe it just should switch to the new object?
我不确定我是否遵循了 camTarget 补间的方式，或者它应该切换到新对象？
Side note: it's advisable not to perform heavy computation in event handlers - in the best of worlds, you set a flag in the event handler and process in the render loop.
旁注：建议不要在事件处理程序中执行大量计算 - 在最好的情况下，您在事件处理程序中设置一个标志并在渲染循环中进行处理。
回答by den232
Sadly, as of three.js version 112 in Feb 2020, camera.target no longer works. jb
遗憾的是，从 2020 年 2 月的 Three.js 版本 112 开始，camera.target 不再有效。jb
