Как оживить Camera.lookAt с помощью трех JS

У меня есть сцена, которая отображает доску с несколькими объектами. Нажав на один из объектов и с помощью выделения объектов, я могу получить объект и оживить положение камеры, чтобы сидеть в режиме "сверху вниз" объекта. Затем, используя метод camera.lookAt, я могу заставить камеру смотреть прямо на объект.

Я замечаю быстрый переход в начале моей анимации при вызове метода camera.lookAt внутри метода onUpdate, поскольку он изначально имеет большое расстояние для поворота, чтобы посмотреть на выбранный объект. Каждый последующий вызов camera.lookAt крошечный по сравнению и хорошо анимирован.

// Position the camera to fit
var tween = new TWEEN.Tween(camera.position).to({
    x: selectedObject.position.x,
    y: selectedObject.position.y,
    z: 1
}).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(function() {
    camera.lookAt(selectedObject.position);
}).onComplete(function() {
    camera.lookAt(selectedObject.position);
}).start();

Есть ли способ анимации метода или мне придется вручную преобразовать матричные значения камеры, чтобы посмотреть на мой выделенный объект?

Вот сценарий с примером. Он использует WebGLRenderer, поэтому используйте подходящий браузер.

http://jsfiddle.net/fungus1487/SMLwa/

Спасибо за любую помощь.

Ответы

Ответ 1

Одна вещь, которую вы можете сделать, - это как положение камеры, так и цель камеры (которую вы должны определить).

var tween = new TWEEN.Tween( camera.position )
    .to( {
        x: selectedObject.position.x,
        y: selectedObject.position.y,
        z: 1
    } )
    .easing( TWEEN.Easing.Linear.None ).onUpdate( function () {

        camera.lookAt( camera.target );

    } )
    .onComplete( function () {

        camera.lookAt( selectedObject.position );

    } )
    .start();

var tween = new TWEEN.Tween( camera.target )
    .to( {
        x: selectedObject.position.x,
        y: selectedObject.position.y,
        z: 0
    } )
    .easing( TWEEN.Easing.Linear.None )
    .onUpdate( function () {

    } )
    .onComplete( function () {

        camera.lookAt( selectedObject.position );

    } )
    .start();

Это немного сложно, потому что подростку нужно работать точно одновременно, а они не... Это причина вызова camera.lookAt() во второй анимации.

Ответ 2

Ответ WestLangley работает, но кажется странно длинным. Я использовал следующее с заранее определенной позицией (xyz) и target (xyz). Использование перспективных элементов управления камерой и трекболом.

new TWEEN.Tween( camera.position ).to( {
    x: position.x,
    y: position.y,
    z: position.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();
new TWEEN.Tween( controls.target ).to( {
    x: target.x,
    y: target.y,
    z: target.z}, 600 )
  .easing( TWEEN.Easing.Sinusoidal.EaseInOut).start();