Rotation 360 animationclip that is constant and not jump

Questions
1

I’m trying to build a spinner animation as a waiting indicator. Unfortunately I am unable to get it to rotate smooth 360 without stopping. It needs to be constant and faster. And it jumps slightly when rotating. So not rotating from it’s center.

The rotation is not clockwise for some reason.

Any ideas

2

This is not the JSFiddle you’re looking for. This one’s empty :face_with_open_eyes_and_hand_over_mouth:

3

It cleared the whole thing. Here it is again Rotate Animation - JSFiddle - Code Playground

4

What is the reason you use AnimationClip? You can simply rotate a mesh every frame:

group.rotation.z += delta*rotationSpeed
2 Likes
5

You don’t have to limit rotation to 360 degrees.. you can keep rotating (if using euler keys) as far as you want.

(and also what trueshko said: you can rotate an object programmatically each frame by just object.rotation.y += .1 or deltaT * something

1 Like
6

In combining of what @trueshko and @manthrax proposed:

I frequently use an unlimited number of full rotations in my animations, while still clipping the rotation’s angle to the [0 .. 2 * Math.PI] range. I go about it like this:

    angle15 += animation_speed;
    if ( angle15 >= (2 * Math.PI) ) angle15 -= 2 * Math.PI;
    ...
    Sprocket15_Group.rotation.set( 0, 0, angle15 );
2 Likes
7

I

This can be done much more simply:

angle15 %= PI*2
2 Likes
8

I like that you all think in terms of radians. Very efficient. Here is a subroutine which uses degrees:

//  Converts degrees to 360
function Mod360(deg) {
	while (deg < 0) deg = deg+360; // Make deg a positive number
	deg = deg % 360; // Compute remainder of any number divided by 360
return deg;}

This covers those rare cases where the change in rotation is greater than 360 degrees. Perhaps this can also be improved?

When using the Euler format, does three.js automatically make these kinds of adjustments to rotation in radians?

9

So using keyframe animations isn’t a good idea ? Is the slight jumping because the svg is off center somehow ? I need to start / stop the animation. But I guess I have to already stop the animationmixer by resetting to an empty callback in the render and calling clipAction.stop(). And to start it again I run clipAction.play() and set the callback to render the mixer.

10

Looking at your code, eliminate the animate function and move:

renderer.setAnimationLoop( update );

into your render definitions. (Actually, I would then rename update as animate in both places.

I have not created a custom animation like you are trying to do. All of my animations are loaded as part of a Blender object. But I expect that the rules are the same, in that the decision to play or stop a clip action should be within the Animation Loop (either directly or as a subroutine). Once you start playing the animation, you don’t have do anything else until you decide to stop the animation. (Or, once playing, you can set the position of the animation on a frame by frame basis using “.setTime”.)

11

The issue with the animationClip its rotating anti-clockwise instead of clockwise, the svg jumps when rotating slightly so moves slightly Im not sure why its doing that. And it stops and pauses before rotating again. There isn’t very good examples how to rotate without stopping like it is.

12

here is both options. Im not sure if the SVG is off center but it does slightly move while rotating. Not sure how to fix that.

13

the jumping was caused by the svg asset not perfectly centered. So needed offsetting its position. all working fine now thanks.

2 Likes