I want to rotate the model more flexibly

Support
,
#1

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.

#2

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

#3

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.

#4

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.

#5

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.