ThreeJS - плавное масштабирование объекта при наведении курсора

Question

Еще один вопрос ThreeJS: как мне сделать масштабируемый (пересекающийся) объект масштабированным до определенного размера? Мой текущий код

INTERSECTED.scale.x *= 1.5; INTERSECTED.scale.y *= 1.5;

но это работает только как вкл / выкл.

Изменить: мое решение (с tweenJS)

В то время как mouseOver я масштабирую элемент до 200%:

function scaleUp(){
    new TWEEN.Tween( INTERSECTED.scale ).to( {
       x: 2,
       y: 2 
    }, 350 ).easing( TWEEN.Easing.Bounce.EaseOut).start();
}

Пока mouseOut, я уменьшаю элемент до 100%:

function scaleDown(){
    new TWEEN.Tween( INTERSECTED.scale ).to( {
       x: 1,
       y: 1 
    }, 350 ).easing( TWEEN.Easing.Bounce.EaseOut).start();
}

Наконец я вызываю функции в функции мыши.

if (intersects[0].object != INTERSECTED)
   scaleUp();
else
   scaleDown();

Это все. Я думаю, что это очень полезно для интерфейсов.

Answer 1

Используя библиотеку анимации (находится в three.js/examples/js/libs/tween.min.js), вы можете анимировать масштаб следующим образом:

function setupObjectScaleAnimation( object, source, target, duration, delay, easing )
{
    var l_delay = ( delay !== undefined ) ? delay : 0;
    var l_easing = ( easing !== undefined ) ? easing : TWEEN.Easing.Linear.None;

    new TWEEN.Tween( source )
        .to( target, duration )
        .delay( l_delay )
        .easing( l_easing )
        .onUpdate( function() { object.scale.copy( source ); } )
        .start();
}

and then call it like so:

setupObjectScaleAnimation( INTERSECTED,
    { x: 1, y: 1, z: 1 }, { x: 2, y: 2, z: 2 },
    2000, 500, TWEEN.Easing.Linear.None );

Или, если вы хотите использовать цикл рендеринга:

clock = new THREE.Clock();
time = clock.getElapsedTime();

INSPECTED.scale.x = time / 1000;
INSPECTED.scale.y = time / 1000;

Вы можете изменить делитель в зависимости от того, насколько быстро или медленно вы хотите, чтобы анимация происходила.