javascript - 使用 ThreeJS 网格的 Tweenmax 比例

标签 javascript three.js gsap

尝试使用 TweenMax 将比例转换合并到我的网格 [0] 中。当我使用“mesh[0].set.scale”作为第一个参数时,我对某些动画没有任何问题,例如旋转,甚至缩放。但是,在这种情况下,我从控制台收到“Uncaught TypeError:无法分配给对象“#”的只读属性“scale”错误。

我猜测这与使用 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,
}
);

最佳答案

解决了我的问题:

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

似乎我正在尝试操纵整个网格,而我应该关注网格的比例。不过,从这里我可以扩大规模并进行操作。

关于javascript - 使用 ThreeJS 网格的 Tweenmax 比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54064726/

相关文章:

javascript - 此页面如何检测桌面浏览器窗口的移动?

javascript - 将字符串中的日期转换为日期对象以插入数据库

javascript - 使用三个js和NSF OpenTopography数据的点云: How do you set up the camera and a controls library to navigate the data?

javascript - 使用 jQuery 反转 CSS 动画

jquery - 将带有动态变量的补间添加到 Scrollmagic/GSAP 时间线

javascript - 使用 TweenLite (JS) 淡入淡出文本不起作用

javascript - 如何在 jquery 中更改 bing map 上的 map 大小

javascript - 数据表中的流程图

javascript - 围绕世界轴旋转对象

javascript - Grafana面板开发: Using external Lib in plugins