Как анимировать камеру с одного вида на другой вид в three.js - PullRequest
Новая
       56

Как анимировать камеру с одного вида на другой вид в three.js

0 голосов
/ 13 марта 2019

Я делаю скриншот моей сцены с определенной точки зрения.Я сохраняю свои свойства камеры.И я позволяю своим пользователям играть со сценой.

В моей сцене у меня есть кнопка, чтобы переключить мой текущий вид на конкретную точку зрения, которую я записал.Когда я нажимаю на кнопку, я меняю свою камеру, используя метод Camera.copy (SavedCamera).

Теперь я хочу изменить вид моей камеры, интерполируя вращение и положение других, пока я не достигну своего сохраненного вращения и положения камеры.Для этого я нашел нить здесь , используя slerp и tween.js

Когда я применяю эту анимацию к своей камере, я не могу достичь конечного положения и поворота камеры.

Он просто поворачивает камеру на 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();
}
...