Странное поведение вращения с hammerjs и threejs

Question

Я хочу вращать объект 3D жестами hammerjs.

В основном, ротация работает, но с двумя проблемами я не могу разобраться.

1. Направление вращения изменяется случайным образом. Поворачивает налево. Я останавливаюсь и затем снова двигаю пальцами в той же самой дикции, и вдруг вместо того, чтобы продолжать вращаться влево, происходит движение вправо. Бывает иногда, но не всегда.

2. Как только вращение началось, оно вращается только в одном направлении, несмотря на то, что я двигаю пальцами в разные стороны.

Вот как я управляю вращением:

public rotateObject3D (e: HammerInput): void {

    if (rotationEnabled) {
      const translation = new THREE.Vector3();
      const rotation = new THREE.Quaternion();
      const scale = new THREE.Vector3();
      const rotateMatrix = new THREE.Matrix4();
      const deltaRotationQuaternion = new THREE.Quaternion();

      this._myObject.matrix.decompose(translation, rotation, scale);

      this._deltaRot = (e.rotation * 0.01);
      deltaRotationQuaternion.setFromEuler(new THREE.Euler(
        0,
        this._deltaRot * (Math.PI / 180),
        0,
        'XYZ'
      ));

      deltaRotationQuaternion.multiplyQuaternions(deltaRotationQuaternion, rotation);

      this._myObject.matrix = rotateMatrix.compose(translation, deltaRotationQuaternion, scale);
    }
  }

И это зов этого:

 this._hammerManager.on('rotate', (e) => {
     this._arTools.rotateObject3D(e);
 });

Есть ли что-то, чего мне не хватает?

Answer 1

Похоже, что вы используете абсолютное значение вращения вместо изменения вращения.Например, рассмотрим следующий сценарий:

• Поворот1: 12 °
• Поворот2: 10 °
• Поворот3: 5 °

Умножая кватернионы, ваш объект поворачивается на 12 °, затем на 22 °, а затем, наконец, на 27 °, даже если вы поворачиваете назад к 0. Это происходит потому, что вы добавляете новое вращение к последнему вращению каждого события.

Что вам нужно сделать, это сохранить предыдущее значение поворота и вычесть его из нового, чтобы получить дельту поворота:

var previousRot = 0;
var newRot = 0;

rotateObject3D(e) {
    newRot = e.rotation - previousRot;

    // You could use newRot for your quaternion calculations
    // but modifying .rotation.y is simpler
    myObject.rotation.y += newRot

    // Save value to be used on next event
    previousRot = newRot;
}

При использовании этого метода приведенный выше сценарий даст вам изменение в ротации.Ваш объект будет сначала вращаться на + 12 °, затем на -2 °, затем на -5 °, для более естественного поведения.

Просто обязательно сбросьте previousRot = 0 на событии HammerJS 'rotateend, чтобы вы не использовали значение из предыдущих жестов при запуске нового.