Loaded GLTF Model Children Rotate On Axis Not working as expected

Hi, I’m not sure what’s wrong here, maybe anyone can help.
So, currently I want to rotate a Ferris Wheel on imported scene from blender.
Ferris Wheel is a group contains 2 objects the circle one (named animate) and the pillar.

So I want to rotate the circle only

imported scene loop
scene.children.forEach(child => {
if (child.name === “Ferris Wheel”) {
child.children.forEach(grandChildren => {
if (grandChild.name === “animate”) {
let pivot = new Group();
pivot.add( grandChild );
child.add( pivot );
this.animation = […this.animation, pivot];
}
})
}
})

then after plotting that object, I go animate the object
this.animation.forEach(poi => {
poi.rotateOnAxis(new Vector3( 1, 0, 0 ), Math.PI * 0.01);
}

the result is somehow not expected (not rotate only in X)
frees-wheel

The best would be if you share some online demo.

One possible reason for wiggling object is when you rotate it around a non-perpendicular axis. This is, if your axis of rotation is (1,0,0), most likely your ferry wheel is not in YZ. Here is a demo of this effect – the left torus spins around a perpendicular axis, the right one – around a non-perpendicular axis. The same effect happens with car wheels when they are off-balance.

https://codepen.io/boytchev/full/wvEZxNR

image

hi @PavelBoytchev thanks for replying and helping

May I get your suggestion how to fix the spin axis into perpendicular axis? Thanks

Here is the online demo link: https://codepen.io/erlandazakaria/pen/abaxaMG

It appears there are two problems – the axis is not perpendicular and the axis is off-center. Beware, that I have estimated the numbers by trial and error. So they may not be perfect:

Change 1: Change the axis of rotation (line 82):

...rotateOnAxis( new THREE.Vector3(Math.sqrt(3)/2,0,-1/2), Math.PI*0.004 );

Change 2: Change the center of rotated object (line 68):

// add this code right after giving name to pivot
pivot.children[0].position.x += 5;
pivot.children[0].position.y -= 15;
pivot.position.x -= 5;
pivot.position.y += 15;

Now, here is a better advice: if you have control over the creation of the model, it is always better to create it so that rotations are around a principal axis and rotations are always around point (0,0,0). If you do not do this, you will always have to modify axes and centers whenever you change the position or the orientation of your model.

Great, it is way way better. Thanks @PavelBoytchev appreciated

No, I dont have control over the creation of the model, but I will ask the artist to be aware of this.

1 Like