Three.js 和 gsap 缩放动画答案

【问题标题】：Three.js and gsap scale animationThree.js 和 gsap 缩放动画
【发布时间】：2020-06-25 22:05:59
【问题描述】：

所以我尝试在three.js 中执行mousemove 事件，用户将鼠标悬停在几何图形上，然后它会缩放。因此，对于我使用 GSAP 作为补间的动画似乎对我不起作用。但是，当我想缩放几何图形时，我不断收到此错误：

我不知道为什么，因为在官方 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});
                }

            }

【问题讨论】：

标签： javascript animation three.js gsap

【解决方案1】：

所以我想出了答案。似乎在three.js中， gsap scale 属性不起作用，因此您需要确保在添加转换之前引用 scale ，然后使用 x 和 y （或者可能 z - 我没有尝试过）增大或减小尺寸。这是对我有用的代码：

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

【讨论】：