CODEWITHSUNDEEP
three.jsrotationmeshgltftween.js
user3532287
user3532287

Reputation: 23

Using tween.js in three.js to do rotation on x, y and z of a gltf

I am having a difficult time to do a rotation on all axis in one statement. This is a loaded gltf that a mesh of it needs to do multiple rotations on x, y and z. My code using a single axis with .onUpdate works but I would like to have all three and possibly, just possibly eliminate .onUpdate in that. Here is what I am trying:

new TWEEN.Tween (theObject.rotation)
   .to ({x: theObject.rotation._x + degreeToRadian(-120),
         y: theObject.rotation._y + degreeToRadian(10),
         z: theObject.rotation._z + degreeToRadian(30)}, 3000)
   .delay (2000)
   .easing (TWEEN.Easing.Quadratic.InOut)
   .start ();

When I pass one axis argument in .to and then apply it in .onUpdate I get the rotation on that axis; and I would like to avoid writing 3 codes, one for each axis.

I have also tried Euler as the object structure is offering, but there was no luck: .to (new THREE.Euler(theObject.rotation._x + degreeToRadian(-120), theObject.rotation._y + degreeToRadian(10), theObject.rotation._z + degreeToRadian(30), "XYZ"), 3000) What am I missing in here? Thank you

Upvotes: 0

Views: 77

Answers (0)

Related Questions