javascript - Hammerjs 和 Threejs 的奇怪旋转行为

Question

我想用hammerjs手势旋转一个3D对象。

基本上是轮换工作，但有两个问题我无法弄清楚。

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°，以获得更自然的行为。

只需确保在 HammerJS 的 rotateend 事件中重置 previousRot = 0 即可，这样当新手势开始时，您就不会使用之前手势的值。