三.js 和 gsap 縮放動畫

Question

所以我試圖在three.js 中做一個mousemove 事件，用戶將鼠標懸停在一個幾何圖形上，然后它會縮放。 所以對於我使用 GSAP 的動畫，因為 tween 似乎對我不起作用。 但是，當我想縮放幾何圖形時，我不斷收到此錯誤：

我不知道為什么，因為在官方 gsap 文檔中，他們使用了 scale，我相信沒有插件。 這是他們網站上的一個例子

gsap.to(".box", 1, {
    scale: 0.1, 
    y: 60,
    yoyo: true, 
    repeat: -1, 
    ease: "power1.inOut",
    delay:1,
    stagger: {
      amount: 1.5, 
      grid: "auto",
      from: "center"
    }
  });

這是我的代碼：

function init () {

/*------Bunch of three.js code and initialsation*/
 window.addEventListener('mousemove',onMouseMove);

}

function onMouseMove(event) {

                event.preventDefault();
                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
                raycaster.setFromCamera(mouse,camera);

                var intersects = raycaster.intersectObjects(scene.children, true);

                for(var i = 0; i < intersects.length; i++) {
                    gsap.to(intersects[i].object.scale, {duration: 1, scale: 0.8});
                }

            }

Answer 1

所以我想出了答案。 似乎在 Three.js 中，gsap scale 屬性不起作用，因此您需要確保在添加轉換之前指的是 scale，然后使用 x 和 y（或者可能是 z - 我沒有嘗試過）增大或減小尺寸。 這是對我有用的代碼：

gsap.to(intersects[i].object.scale, {duration: .7, x: 1.2, y:1.2});