I want to rotate the model more flexibly

Hello, everybody. I am very happy to post this.
https://fan-showing.herokuapp.com/ is my hosted app which uses the sketch fab.
In model detail, I rotate the wing of the fan.
When I click the low/medium/high button, it rotates.
But it doesn’t work flexibly now.

updateRotation() {
var thisObject = this;
if (!this.state.fanInfo.doneRotate){
return;
}
this.setState(prevState => ({
…prevState,
fanInfo: {
…prevState.fanInfo,
doneRotate: false,
}
}));

    var api = this.state.fanInfo.api;
    if (!api) return ;
    var nodeId = this.state.fanInfo.nodeId;
    var cuSpeed = this.state.fanInfo.rotateSpeed;
    var targetSpeed = this.state.fanInfo.targetrotateSpeed;
    var wingPos = this.state.fanInfo.wingPosition;
    var stepAngle = 0.5;
    var easingLine = 'easeLinear';
    var nextAngle = cuSpeed;
    if (cuSpeed < targetSpeed) {
        nextAngle = Math.min(targetSpeed , cuSpeed + stepAngle);
    } else if (cuSpeed > targetSpeed) {
        nextAngle = Math.max(targetSpeed , cuSpeed - stepAngle);
    }
    wingPos = (nextAngle + wingPos) % 360;
    api.rotate(nodeId, [wingPos / 180 * Math.PI, 0, 0, 1], {
        duration: (50) / 1000,
        easing: easingLine
        }, function( ) {           
            thisObject.setState(prevState => ({
                ...prevState,
                fanInfo: {
                    ...prevState.fanInfo,
                    rotateSpeed: nextAngle,
                    wingPosition: wingPos,
                    doneRotate: true,
                }
        }));
        thisObject.updateRotation();
    });
  };

This code is the wing rotate part.
Please let me know if there is anyway to make more flexibly rotating.
or Anybody can improve this function , please contact me.
Thanks.

Hi @ProminenceHome
this is looking great. IT seems the code works just fine. How would you like to make it more flexible?

Thanks for your response.
But the wings of the fan doesn’t rotate flexible like this.
https://hkcus.herokuapp.com/
I think, there might be another way to make rotating more flexibly.
Thanks.

I’m not sure what you mean by flexible. Perhaps it’s the motion of the fan that is a bit “jerky” and not smooth?
Perhaps you could try to split the motion into two parts: the acceleration and the steady rotation. Let’s say you want to accelerate the fan from 0degrees to 90degrees in 3 seconds, you could use:

 api.rotate(id, [Math.PI * 0.5, 0, 0, 1], {duration: 3, easing: 'easeInQuart'})

Once you’ve accelerated you can do the steady motion where you rotate the fan 90 degrees with a linear easing. The trick is then to tweak the duration of the steady motion to the easing (acceleration) of the other motions.
Here’s a sketch of this idea: https://codepen.io/klaasnienhuis/pen/LYzoKBR?editors=1010
It’s a bit smoother, but not completely smooth to be honest.

Thanks for your reply.
It looks good.
I think, there are two ways to implement accelerate/deaccelerate.
One is controlling the rotate angle in unit time and another one is controlling the time to rotate the fan for unit angle.
In all cases, the viewer is a bit “jerky” and not smooth, when it is faster.
The most important thing is, the viewer is shown differently a little every machine.