如何使用三个JS为Camera.lookAt设置动画

Question

我有一个场景,呈现一个有几个对象的板.单击其中一个对象并使用对象拾取,我可以获取对象并为摄像机位置设置动画,使其位于对象的"俯视"视图中.然后使用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,因此请使用合适的浏览器.

http://jsfiddle.net/fungus1487/SMLwa/

谢谢你的帮助.

Answer 1

您可以做的一件事是在相机位置和相机目标(您必须定义)之间进行补间.

var tween = new TWEEN.Tween( camera.position )
    .to( {
        x: selectedObject.position.x,
        y: selectedObject.position.y,
        z: 1
    } )
    .easing( TWEEN.Easing.Linear.None ).onUpdate( function () {

        camera.lookAt( camera.target );

    } )
    .onComplete( function () {

        camera.lookAt( selectedObject.position );

    } )
    .start();

var tween = new TWEEN.Tween( camera.target )
    .to( {
        x: selectedObject.position.x,
        y: selectedObject.position.y,
        z: 0
    } )
    .easing( TWEEN.Easing.Linear.None )
    .onUpdate( function () {

    } )
    .onComplete( function () {

        camera.lookAt( selectedObject.position );

    } )
    .start();

这有点棘手,因为补间需要完全同时运行,而且它们不会......这就是在第二个补间中调用camera.lookAt()的原因.

Answer 2

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();