Three.js OrbitControls анимация анимации перед лицом (спереди) целевого объекта - PullRequest
0 голосов
/ 08 мая 2019

Когда я нажимаю кнопку, я хочу, чтобы OrbitControls (камера) плавно находилась перед объектом (лицевой стороной), используя tween.js.

Я использую этот код, но обнаружил, что после изменения controls.target и панорамирования далеко от целевого объекта, я могу только увеличить немного, а после увеличения не могу панорамировать.

Есть ли другой способ посмотреть на объект? Спасибо!

var from = {
    x: controls.target.x,
    y: controls.target.y,
    z: controls.target.z
};

var to = {
    x: object.getWorldPosition().x,
    y: object.getWorldPosition().y,
    z: object.getWorldPosition().z
};

var tween = new TWEEN.Tween(from)
    .to(to, 1000)
    .easing(TWEEN.Easing.Quadratic.InOut) // | TWEEN.Easing.Linear.None
    .onUpdate(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .onComplete(function () {
        controls.target.set( this.x, this.y, this.z )
    })
    .start();

1 Ответ

1 голос
/ 09 мая 2019

Попробуйте следующее: при запуске анимации отключите элементы управления с помощью controls.enabled = false;, чтобы предотвратить любые помехи для вашей анимации. Затем, реализуйте обратный вызов onComplete() одного из ваших подростков следующим образом:

.onComplete(function() {

    controls.enabled = true;
    camera.getWorldDirection( lookDirection );
    controls.target.copy( camera.position ).add( lookDirection.multiplyScalar( 10 ) );

})

Идея состоит в том, чтобы снова включить элементы управления, вычислить текущее направление взгляда вашего вида и затем установить новую цель для элементов управления. Вы также можете установить предопределенную цель, если вам нужно точное целевое место для каждой позиции камеры. Значение 10 указывается в мировых единицах и определяет, как далеко должна быть цель в направлении взгляда.

Обновленная скрипка: https://jsfiddle.net/ckgo7qu8/

...