Как плавно повернуть объект при клике на иконку?

Question

[myskypesla]

Всем привет.

Есть статичный объект.
И есть 3 иконки в div поверх canvas.

Использую three.js.

Вопрос, как плавно повернуть объект при клике на одну из иконок?

Использовал данный гайд для запуска объекта в браузере https://blackthread.io/blog/progress-bar/

Answer 1

[svaa1982]

Чтобы покрутить плавно нужна процедурная анимация. В начале крутите медленно, потом плавно ускоряете, под конец опять замедляете. Для поворота объектов используется метод Object.rotateX (или rotateY, rotateZ).

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));