Question

我从特定角度拍摄了我的场景的屏幕截图。我保存相机属性。然后，我让用户随心所欲地玩。

在我的场景中，我有一个按钮可将当前视图切换到已记录的特定视图。当我单击按钮时，我使用Camera.copy（savedCamera）方法更换了相机。

现在，我想通过插值其他旋转和位置来更改相机视图，直到达到保存的相机旋转和位置。为此，我通过使用slerp和tween.js找到了一个线程here

将此动画应用于相机时，无法达到相机的最终位置和旋转角度。

它只是将相机旋转360°

//camCurrent: current camera
//camTarget: saved camera 
function moveCamera(camCurrent, camTarget) {

var cameraPos0 // initial camera position
var cameraUp0 // initial camera up
var cameraZoom // camera zoom
var iniQ // initial quaternion
var endQ // target quaternion
var curQ // temp quaternion during slerp
var vec3 // generic vector object

cameraPos0 = camCurrent.position.clone()
cameraUp0 = camCurrent.up.clone()

endQ = new THREE.Quaternion()
iniQ = new THREE.Quaternion().copy(camCurrent.quaternion)
curQ = new THREE.Quaternion()
vec3 = new THREE.Vector3()

endQ.setFromEuler(camTarget.rotation);

var alpha = { a: 0 };
var alphaEnd = { a: 1 };
var tween = new TWEEN.Tween(alpha).to(alphaEnd, 1000).onUpdate(function() {
    // interpolate quaternions with the current tween value
    THREE.Quaternion.slerp(iniQ, endQ, curQ, alpha.a)
    console.log(curQ);

    // apply new quaternion to camera position
    vec3.x = cameraPos0.x
    vec3.y = cameraPos0.y
    vec3.z = cameraPos0.z

    vec3.applyQuaternion(curQ)
    camCurrent.position.copy(vec3)

    // apply new quaternion to camera up
    vec3 = cameraUp0.clone()
    vec3.applyQuaternion(curQ)
    camCurrent.up.copy(vec3)
});
console.log(iniQ);
console.log(endQ);
console.log('start tween');

tween.start();
}

如何在Three.js中将摄像机从一个视图动画化为另一个视图

0 个答案: