16

我有一个场景，它渲染了一个带有多个对象的板。单击其中一个对象并通过使用对象拾取，我可以获得对象并将相机位置设置为动画以位于对象的“俯视”视图中。然后使用 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/

谢谢你的帮助。

4

2 回答 2

19

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

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() 的原因。

于 2013-01-28T18:32:50.567 回答
7

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();
于 2013-03-21T15:19:34.047 回答