如何將相機與three.js中的對象補間？

我在場景中創建了一些對象，並設置了光線投射/補間代碼，以便每當我單擊某個對象時，該對象都會直接對相機的位置和旋轉進行動畫處理。如何將相機與three.js中的對象補間？

這是我對光線投射碼/補間的對象：

function onDocumentMouseDown(event) { 

      event.preventDefault(); 

      mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
      mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 

      raycaster.setFromCamera(mouse, camera); 

      var intersects = raycaster.intersectObjects(scene.children); 

      if (intersects.length > 0) { 

       new TWEEN.Tween(intersects[ 0 ].object.position).to({ 
        x: 0, 
        y: 0, 
        z: -100 }, 2000) 
       .easing(TWEEN.Easing.Elastic.Out).start(); 

       new TWEEN.Tween(intersects[ 0 ].object.rotation).to({ 
        x: 0, 
        y: 0, 
        z: 0 }, 2000) 
       .easing(TWEEN.Easing.Elastic.Out).start(); 
       object.lookAt.camera; 

      } 
     }

不過，我想知道，我怎樣才能使補間相機動畫的對象，而不是對象的相機？我想這樣做是因爲我希望物體不斷旋轉並在場景中移動，並希望攝像機能夠保持並跟蹤單個物體。順便說一下，這是所有的透視攝像機。

來源

2016-12-07 Ben

假設您使用OrbitControls.js來控制您的相機。
然後你需要做的是將控制目標設置爲controls.target = new THREE.Vector3(0, 0, -100);到你的對象（或補間它）的中心。您將對象旋轉設置爲（0,0,0），因此假設您想從頂部查看對象，將相機位置設置爲（0,10，-100） - 與您的目標相同，只是偏移朝着你想要的方向發展。
假設你的對象旋轉不是（0,0,0），你需要計算它的向前向量（或者你想要從中看到的任何其他向量），並且把相機的位置放在這個向量的軸上。

來源

2016-12-07 07:55:54 user3698985

我試圖做同樣的事情，這是我有這麼遠，但與得到掙扎的對象面對的方向向量

function toObj(obj) { 

var lookAtVector = new THREE.Vector3(0, 0, 1); 
lookAtVector.applyQuaternion(obj.quaternion); 
console.log(lookAtVector); 
var rotateTween = new TWEEN.Tween(controls.target) 
    .to({ 
     x: obj.position.x, 
     y: obj.position.y, 
     z: obj.position.z 
    }, 4000) 
    .interpolation(TWEEN.Interpolation.CatmullRom) 
    .easing(TWEEN.Easing.Quintic.InOut) 
    .start(); 

var goTween = new TWEEN.Tween(camera.position) 
    .to({ 
     x: obj.position.x, 
     y: obj.position.y, 
     z: obj.position.z + 10 
    }, 4000) 
    .interpolation(TWEEN.Interpolation.CatmullRom) 
    .easing(TWEEN.Easing.Quintic.InOut); 

goTween.start(); 
goTween.onComplete(function() { 
    console.log('done!'); 

});

}

，你將需要添加控制=新三.TrackballControls（照相機）;

來源

2016-12-16 23:57:27

如何將相機與three.js中的對象補間？

回答

相關問題