Поворот камеры с автоматическим поворотом (OrbitControls) из точки A в точку B - PullRequest
Новая
       14

Поворот камеры с автоматическим поворотом (OrbitControls) из точки A в точку B

0 голосов
/ 04 марта 2020

У меня есть сцена, в которой есть pl anet (земля) в положении (0, 0, 0) с радиусом 100.

Когда сцена загружается, камера позиционируется на (0, 0, 600) чтобы сделать pl anet более отдаленным, и через несколько секунд камера поворачивается к (0, 150, 200), чтобы эффект pl anet приблизился и слегка обрезался от экрана.

Это прекрасно работает при использовании Tween. js, и камера поворачивается в правильное положение. Однако я хочу, чтобы pl anet вращался все время, то есть до, во время и после анимации, и поэтому я использую OrbitControls с autoRotate, установленным на true.

Когда я включаю autoRotate, камера поворачивается в немного неправильное положение, которое я предполагаю, потому что autoRotate обновляет положения x и z камеры, и поэтому анимация движения не перемещается из одного точного положения в другое .

Итак, мой вопрос , как я могу правильно повернуть камеру с автоповоротом из одного положения в другое, чтобы она оказалась в точных правильных координатах и ​​вращалась все время?

Моя функция одушевления: 

props.camera.animate = (duration = 2000) => {
    return new Promise((resolve, reject) => {

        let { x: croppedX, y: croppedY, z: croppedZ } = settings.camera.croppedPosition;

        let from = {
            x: props.camera.position.x,
            y: props.camera.position.y,
            z: props.camera.position.z,
            lookAtX: tools.orbit.target.x,
            lookAtY: tools.orbit.target.y,
            lookAtZ: tools.orbit.target.z
        }

        let to = {
            x: croppedX,
            y: croppedY,
            z: croppedZ,
            lookAtX: 0,
            lookAtY: croppedY,
            lookAtZ: -1
        }

        let tween = new TWEEN.Tween(from)
            .to(to, duration)
            .easing(TWEEN.Easing.Sinusoidal.InOut)
            .onUpdate(function() {
                props.camera.position.set(from.x, from.y, from.z);
                tools.orbit.target.copy(new THREE.Vector3(from.lookAtX, from.lookAtY, from.lookAtZ));
                tools.orbit.update();
            })
            .onComplete(function() {
                props.camera.position.set(to.x, to.y, to.z);
                tools.orbit.target.copy(new THREE.Vector3(to.lookAtX, to.lookAtY, to.lookAtZ));
                tools.orbit.update();

                resolve();
            })
            .start();
    });
};

Для наглядности я пытаюсь воссоздать что-то вроде глобуса здесь и анимацию, которая происходит когда вы нажимаете на один из зеленых маркеров, но мой глобус вращается все время.

Также добро пожаловать в любые предложения, если изменение положения камеры не лучший способ добиться эффекта жду.

К вашему сведению - я первоначально разместил этот вопрос на Трех. js дискурс здесь , но чувствовал, что было бы полезно также опубликовать здесь.

...