使用 ThreeJS 网格的 Tweenmax 缩放答案

【问题标题】：Tweenmax Scale with ThreeJS Mesh使用 ThreeJS 网格的 Tweenmax 缩放
【发布时间】：2019-05-28 20:41:14
【问题描述】：

尝试使用 TweenMax 将比例转换合并到我的网格 [0]。当我使用 'mesh[0].set.scale' 作为第一个参数时，我对某些动画没有任何问题，例如旋转，甚至缩放。但是，在这种情况下，我从控制台收到“Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'' 错误。

我猜这与使用 GSAP 和 ThreeJS 的组合有关，因为我已经在纯 javascript 中尝试了相同的代码并且它工作正常。

我已尝试包含最少的代码，如果需要更多代码，请告诉我！

const geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
materialRed = new THREE.MeshStandardMaterial({
  color: 0xFF0000
});

mesh[0] = new THREE.Mesh( geometry, materialRed );

scene.add(mesh[0]);

TweenMax.to(mesh[0], 1,  
{
  scale: 2,
  ease: Elastic.easeOut,
  yoyo: true,
  repeat: -1,
  yoyoEase: Bounce.easeOut,
  delay: 1,
}
);

【问题讨论】：

标签： javascript three.js gsap

【解决方案1】：

找出我的问题：

TweenMax.to(mesh[0].scale, 1, 
{ x: 1.2,
  y: 1.2,
  z: 1.2,
  yoyo: true,
  repeat: -1,
});

似乎我试图操纵整个网格，而我本应该专注于网格的规模。但是，我可以从这里放大和操作。

【讨论】：

【解决方案2】：

重复方法调用已更新：

https://greensock.com/docs/TimelineMax/repeat()

   var t = Math.random() * 0.6 + 0.3;

  TweenMax.to( box.scale, t, {
                    x: 1 + Math.random() * 3,
                    y: 1 + Math.random() * 20,
                    z: 1 + Math.random() * 3,
                    ease: Power2.easeInOut
                } ).repeat(-1);

演示：

https://codepen.io/MAKIO135/pen/vmBzMv?editors=0010

【讨论】：