CODEWITHSUNDEEP
javascriptthree.jsgsap
rome
rome

Reputation: 579

Tweenmax Scale with ThreeJS Mesh

Trying to incorporate a scale translation to my mesh[0] using TweenMax. I'm not having any problems with certain animations, such as rotation, or even scaling when I use 'mesh[0].set.scale' as the first argument. However, in this situation I'm getting 'Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'' errors from the console.

I'm guessing that this is to do with the combination of using GSAP and ThreeJS, because I've tried out the same code in plain javascript and it works OK.

I've tried to include minimal code, so please let me know if more is needed!

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,
}
);

Upvotes: 0

Views: 1188

Answers (2)

Hitesh Sahu
Hitesh Sahu

Reputation: 45120

Repeat method call has been updated:

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);

Demo:

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

Upvotes: 1

rome
rome

Reputation: 579

Figured out my issue:

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

Seems as if I was trying to manipulate the whole mesh, when I should have been focusing on the scale of the mesh. From here I can scale up and manipulate however.

Upvotes: 1

Related Questions