Three.js 如何使用三个JS设置Camera.lookAt的动画

我有一个场景，它渲染了一个包含多个对象的板。单击其中一个对象，通过使用对象拾取，我可以获取对象并设置摄影机位置的动画，使其位于对象的“头顶”视图中。然后使用camera.lookAt方法，我可以强制摄影机直接注视对象

在onUpdate方法中调用camera.lookAt时，我注意到动画开始时有一个快速跳转，因为它最初有一个很大的旋转距离来查看选定的对象。相比之下，对camera.lookAt的后续调用都很小，并且动画效果很好

// Position the camera to fit
var tween = new TWEEN.Tween(camera.position).to({
    x: selectedObject.position.x,
    y: selectedObject.position.y,
    z: 1
}).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function() {
    camera.lookAt(selectedObject.position);
}).onComplete(function() {
    camera.lookAt(selectedObject.position);
}).start();

是否有任何方法可以设置该方法的动画，或者我必须手动变换摄影机的矩阵值以查看选定对象

下面是一个例子。它使用WebGLRenderer，因此请使用合适的浏览器

---

谢谢您的帮助。

您可以做的一件事是在相机位置和相机目标之间（您必须定义）

这有点棘手，因为tween需要同时运行，而他们不。。。

---

这就是在第二个tween中调用camera.lookAt（）的原因。

WestLangley的答案有效，但看起来奇怪的冗长。我使用了一个预定义的位置（xyz）和目标（xyz）。使用透视摄影机和轨迹球控件

new TWEEN.Tween( camera.position ).to( {
    x: position.x,
    y: position.y,
    z: position.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();
new TWEEN.Tween( controls.target ).to( {
    x: target.x,
    y: target.y,
    z: target.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();

---

上帝保佑。非常感谢。请问您如何定义camera.target？THREE.js中没有定义它。@pkout如答案的第一行所述，它是您必须定义的东西。但是，它不必是

相机的属性。啊，对不起。我不知道我怎么会错过。非常感谢。到今天为止，我们已经有了3个合适的浏览器，3年的时间是多么的不同啊
new TWEEN.Tween( camera.position ).to( {
    x: position.x,
    y: position.y,
    z: position.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();
new TWEEN.Tween( controls.target ).to( {
    x: target.x,
    y: target.y,
    z: target.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();