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

Question

Когда я нажимаю кнопку, я хочу, чтобы 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();

Answer 1

Попробуйте следующее: при запуске анимации отключите элементы управления с помощью 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/