Three.js和gsap动画

Question

[因此，我试图在three.js中执行mousemove事件，用户将鼠标悬停在某个几何上，然后将其缩放。因此，对于动画，我正在使用GSAP，因为补间似乎不适用于我。但是，当我要缩放几何图形时，总是出现此错误：

编辑：新错误

我不知道为什么，因为在官方gsap文档中，他们使用scale，但我相信没有插件。这是他们网站gsap.to（“。box”，1，{规模：0.1，y：60，yoyo：是的，重复：-1，easy：“ power1.inOut”，延迟：1，错开：{数量：1.5，网格：“自动”，来自：“中心”}}）;`

这是我的代码：

function init（）{

/ ------ three.js代码和初始化的代码束 /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

您正在尝试补间object.scale.scale，您应该只使用此：

gsap.to(intersects[i].object, {duration: 1, scale: 0.8});

Answer 2

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

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