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();

就是这样。我认为对 UI 非常有用。

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;

您可以根据希望动画发生的快慢来更改除数。