为什么 A-Frame 相机动画不总是沿最短路径旋转？

Question

我设置了一个虚拟游览并添加了一些动画摄像机运动（我知道在 VR 中不建议这样做，但这只是一个桌面项目，没有 VR，只需用鼠标光标指向并单击即可）。

大多数情况下，相机会沿着最短的路径从当前位置旋转到目的地。但其他时候，它只需要最长的路径，这根本不需要。

为什么会这样？有什么我可以做的吗？

这是我的代码： JSFiddle

以下是重现该行为的方法：

从起始位置，按回车键旋转相机（它将走最长的路径）。从那里，按空格键再次旋转它，将其指向另一个位置（同样，它将采用最长的路径）。

var myCam = document.querySelector("a-camera");
document.addEventListener("keydown", event => {
  if (event.keyCode == 13) {
    myCam.setAttribute("animation", "property: rotation; to: -4.68 -210.55 0; loop: false; dur: 2000; startEvents: lookAtSomething");
    myCam.emit('lookAtSomething');
    myCam.components["look-controls"].pitchObject.rotation.x = -0.08168140899333462;
    myCam.components["look-controls"].yawObject.rotation.y = -3.674790740074061;
  } else if (event.keyCode == 32) {
    myCam.setAttribute("animation", "property: rotation; to: -2.30 59.36 0; loop: false; dur: 2000; startEvents: lookAtSomething");
    myCam.emit('lookAtSomething');
    myCam.components["look-controls"].pitchObject.rotation.x = -0.04014257279586958;
    myCam.components["look-controls"].yawObject.rotation.y = 1.051735407251783;
  }
});

<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<a-scene background="color: #FAFAFA">
  <a-camera id="myCam" cursor="rayOrigin:mouse" look-controls="reverseMouseDrag:true">
    <a-cursor material="color: yellow; shader: flat"></a-cursor>
  </a-camera>
  <a-sky src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1920px-Equirectangular_projection_SW.jpg"></a-sky>
</a-scene>

Answer 1

我认为它做了一个简单的减法，并且根据原始值和目标值（例如负值）它可以追踪很长的路径。避免这种情况的一种方法是在设置动画以适应您的值之前进行计算。例如 -210.55 与 149.45 相同，根据您的起点，它会缩短路径。您应该尝试一些规则，看看最适合的规则。

在设置动画属性的“from”值之前，我遇到了同样的问题并遵循了这个规则。这很随意，但对我有用。

if (Math.abs(y_from) > 90) y_from -= 360 * Math.sign(y_from);