16

複数のオブジェクトを含むボードをレンダリングするシーンがあります。オブジェクトの 1 つをクリックし、オブジェクト ピッキングを使用して、オブジェクトを取得し、カメラの位置をアニメートして、オブジェクトの「オーバーヘッド」ビューに配置できます。次に、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

できることの 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();

トゥイーンは正確に同時に実行する必要があるため、少し注意が必要です。これが、2 番目のトゥイーンで 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 に答える