How to smoothly rotate an object when clicking on the icon?

Question

WebGL

Hello.
There is a static object.
And there are 3 icons in a div on top of the canvas.
I am using three.js.
The question is how to smoothly rotate an object when clicking on one of the icons?
Used this guide to launch an object in the browser https://blackthread.io/blog/progress-bar/

Answer 1

Procedural animation is needed to rotate smoothly. Spin slowly at the beginning, then gradually accelerate, and finally slow down again. To rotate objects, use the Object.rotateX (or rotateY, rotateZ) method.

function smoothstep(edge0, edge1, x) {
  // Scale, bias and saturate x to 0..1 range
  x = min(max((x - edge0) / (edge1 - edge0), 0.0), 1.0); 
  // Evaluate polynomial
  return x * x * (3 - 2 * x);
}

Object.rotateX(smoothstep(0, Math.PI, time/10));