A-Frame：奇怪的旋转到两个不在我的代码中的对象

Question

//让我解释一下代码的作用，有两个盒子，一蓝一绿，当你点击绿色盒子时，蓝色盒子会在空中移动一圈，圆圈上有12个点，每个点都是一个案例，当蓝色框在移动时，蓝色框和绿色框都在旋转。这段代码工作正常，问题是在最后一次旋转时，当蓝色框返回到起点时，蓝色框有一个神秘的快速 360 旋转，这不在我的代码中，而且绿色框也有360度旋转，没有任何解释。我查看了 StackOverFlow、In the Documentation 和 Discord，但我不知道如何称呼这个问题，而且您知道，当您不知道要搜索的内容的名称时，很难进行搜索。关于是什么原因导致点击重置点出现这种神秘的 360 度旋转，有什么帮助吗？我不希望它有一个神秘的 360 度旋转，以某种方式将该点标记为特殊，而不是与所有其他点相同。

        init: function () {
          var rota = document.querySelector(".rota");
          var caller = document.querySelector("#caller");
          var clickCount = 0;
          let shouldScaleUp = true; // Keep track of scaling direction
          
          caller.addEventListener("click", function (e) {
            var rotation = caller.getAttribute("rotation");
            var position = caller.getAttribute("position");
            var scale = caller.getAttribute("scale");

            // Blue box rotation, position, and scale
            var angle = (clickCount * Math.PI) / 6 - Math.PI / 2; // Angle for each click (360 degrees / 12 clicks), offset by -90 degrees
            var newX, newY, newZ;

            switch (clickCount) {
              case 0:
                newX = 3;
                newY = 2;
                newZ = -3;
                break;
              case 1:
                newX = 2;
                newY = 2;
                newZ = -2;
                break;

// case 2 through 10 you can just imagine

              case 11:
                newX = 2;
                newY = 2;
                newZ = -4;
                break;
              case 12:
                newX = 3;
                newY = 2;
                newZ = -3;
                break;
            }

            rota.setAttribute("animation", {
              property: "rotation",
              to: { x: (-angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the green box
              dur: 1000,
              shortestPath: true
            });
            rota.setAttribute("animation__2", {
              property: "position",
              to: { x: newX, y: newY, z: newZ }, // Move along the circular path above the green box
              dur: 500,
            });
            rota.setAttribute("animation__3", {
              property: "scale",
              from: { x: 0.01, y: 0.01, z: 0.01 }, // Start with a very small scale
              to: { x: 1, y: 1, z: 1 }, // Expand to full size
              dur: 1000,
            });
            
            // Green box rotation and scale
            caller.setAttribute("animation", {
              property: "rotation",
              to: { x: (angle * 180) / Math.PI, y: 0, z: 0 }, // Rotate to face the blue box
              dur: 1000,
            });
            clickCount = (clickCount + 1) % 12; // Reset```

Answer 1

看起来这个问题可能与您在 switch 语句中处理最终情况（情况 12）的方式有关。当 clickCount 达到 12 时，应重置为 0 以重新启动动画序列。但是，您似乎将其重置为 (clickCount + 1) % 12，这实际上将其重置为 1 而不是 0。

要解决此问题，您应该在 clickCount 达到 12 时将其重置为 0。以下是更正后的行： 点击次数 = (点击次数 + 1) % 13; // 当达到 12 时重置为 0

通过将 % 12 更改为 % 13，它可以确保 clickCount 从 0 循环到 12，然后重置为 0，这应该可以解决最后神秘的额外旋转问题。

此外，请确保调整案例 12 的案例处理，以正确处理最终轮换。

如果您需要进一步帮助或遇到任何其他问题，请告诉我！