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;

您可以根据想要动画发生的速度或速度来更改除数。

ThreeJS - 鼠标悬停时平滑缩放对象

1 个答案: