Установите поворот анимации, чтобы использовать направление наименьшего угла - PullRequest
Новая
       41

Установите поворот анимации, чтобы использовать направление наименьшего угла

0 голосов
/ 29 января 2019

Я пытаюсь повернуть вращение моей камеры (на самом деле, родительский объект моей камеры, который служит опорой вокруг начала координат) на выбранную грань куба так, чтобы расстояние вращения было минимизировано, как описано в Короткое вращение орбитальной камеры ThreeJS , как показано ниже.Есть все еще некоторые грани куба, для которых вращение вращается вокруг длинного пути.Чего мне не хватает?Должен ли я использовать кватернионы или сферические координаты вместо Эйлера? 

. . .
this.pivot.add(this.camera);
. . .

var fromEuler = (new THREE.Euler()).set(this.pivot.rotation.x, this.pivot.rotation.y, this.pivot.rotation.z, 'XYZ');
var toEuler = new THREE.Euler();

// user clicks on plane 'cubeFace'

toEuler.copy(cubeFace.rotation);
let adjustedEuler = adjustToAngle(fromEuler, toEuler);
myTween(adjustedEuler.x, adjustedEuler.y, adjustedEuler.z);

. . .

 adjustToAngle(from, to) {
  let result = new THREE.Euler();
  result.set(this.adjust(from.x, to.x), this.adjust(from.y, to.y), this.adjust(from.z, to.z), 'XYZ');
  return result;
}

adjust(from, to) {
  let result = to;
  if (Math.abs(to - from) > Math.PI) {
    if (to > 0) { // if to is positive we remove a full-circle, add it otherwise
      result = to - 2 * Math.PI;
    } else {
      result = to + 2 * Math.PI;
    }
  }
return result;
}

myTween(rx, ry, rz) {
    var self = this;
    this.animating = true;
    this.animate();
    TWEEN.removeAll();
    var start = {
      rx: self.pivot.rotation.x,
      ry: self.pivot.rotation.y,
      rz: self.pivot.rotation.z
    };
    var finish = {rx: rx, ry: ry, rz: rz};
    var tween = new TWEEN.Tween(start)
      .to(finish, 250)
      .onUpdate(function () {
        self.pivot.rotation.set(this.rx, this.ry, this.rz, 'XYZ');
      })
      .easing(TWEEN.Easing.Linear.None)
      .onComplete(function () {
        self.animating = false;
      })
      .start();
  }
...