ThreeJS - 平滑縮放對象，同時鼠標懸停

Question

另一個ThreeJS問題： 如何使一個懸停（相交）對象比例尺平滑到一個定義的大小？我當前的代碼是

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

但是這隻能想開/關。

編輯：我的溶液（用tweenJS）

雖然鼠標懸停我比例放大元件至200％：

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

雖然鼠標移出我的元件按比例縮小到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

使用Tween庫（在three.js所/例子/ JS /庫/ 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; 

您可以根據您希望動畫發生的速度有多快來改變除數。