A-Frame中物体复位时出现莫名360度旋转的问题求助

功能说明 #

• 场景内包含蓝色盒子（.rota）和绿色盒子（#caller）
• 点击绿色盒子，蓝色盒子沿包含12个点位的圆形路径移动，每个点位对应switch语句的一个case
• 移动过程中，蓝、绿盒子同步旋转，互相朝向对方

异常现象 #

代码运行基本正常，但当蓝色盒子回到起始点位（第12次点击后），蓝、绿盒子会出现未定义的快速360°旋转，该点位表现与其他11个点位不一致。

核心代码片段 #

AFRAME.registerComponent("copy_rotation_scale_position", {
    init: function () {
      var rota = document.querySelector(".rota");
      var caller = document.querySelector("#caller");
      var clickCount = 0;
      let shouldScaleUp = true; // 记录缩放方向
      
      caller.addEventListener("click", function (e) {
        var rotation = caller.getAttribute("rotation");
        var position = caller.getAttribute("position");
        var scale = caller.getAttribute("scale");

        // 蓝色盒子的旋转、位置和缩放计算
        var angle = (clickCount * Math.PI) / 6 - Math.PI / 2; // 每次点击对应30°（360/12），偏移-90°
        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 至 case 10 省略

          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 }, // 朝向绿色盒子
          dur: 1000,
          shortestPath: true
        });
        // 蓝色盒子移动动画
        rota.setAttribute("animation__2", {
          property: "position",
          to: { x: newX, y: newY, z: newZ }, // 沿圆形路径移动
          dur: 500,
        });
        // 蓝色盒子缩放动画
        rota.setAttribute("animation__3", {
          property: "scale",
          from: { x: 0.01, y: 0.01, z: 0.01 }, // 从极小尺寸开始
          to: { x: 1, y: 1, z: 1 }, // 放大至原尺寸
          dur: 1000,
        });
        
        // 绿色盒子旋转动画
        caller.setAttribute("animation", {
          property: "rotation",
          to: { x: (angle * 180) / Math.PI, y: 0, z: 0 }, // 朝向蓝色盒子
          dur: 1000,
        });
        clickCount = (clickCount + 1) % 12; // 重置计数
      });
    }
});

问题成因 #

1. 角度计算突变：当clickCount从11重置为0时，旋转角度的计算发生突变：
   • clickCount=11时，angle = (11*Math.PI/6) - Math.PI/2 = 4π/3，对应蓝色盒子目标旋转x轴为-240°，绿色盒子为240°
   • clickCount=0时，angle = 0 - Math.PI/2 = -π/2，对应蓝色盒子目标旋转x轴为90°，绿色盒子为90°
2. ShortestPath逻辑冲突：启用shortestPath: true后，AFRAME动画系统会在360°范围内选择最短旋转路径。但由于-240°等价于120°、90°等价于270°，系统错误地选择了跨360°边界的长路径，导致出现快速整圈旋转的异常。

解决方案 #

方案一：使用累积角度避免突变 #

通过累积角度变量替代clickCount的模运算，确保旋转角度连续变化，消除复位时的突变：

AFRAME.registerComponent("copy_rotation_scale_position", {
    init: function () {
      var rota = document.querySelector(".rota");
      var caller = document.querySelector("#caller");
      let totalAngle = -Math.PI/2; // 初始角度对应起始点位的旋转

      caller.addEventListener("click", function (e) {
        var newX, newY, newZ;
        // 根据累积角度计算当前对应的点位索引
        const clickCount = Math.round( (totalAngle + Math.PI/2) / (Math.PI/6) ) % 12;

        switch (clickCount) {
          case 0:
            newX = 3;
            newY = 2;
            newZ = -3;
            break;
          case 1:
            newX = 2;
            newY = 2;
            newZ = -2;
            break;
          // case 2 至 case 10 省略
          case 11:
            newX = 2;
            newY = 2;
            newZ = -4;
            break;
        }

        // 蓝色盒子旋转动画：使用连续的累积角度
        const targetRotX = (-totalAngle * 180) / Math.PI;
        rota.setAttribute("animation", {
          property: "rotation",
          to: { x: targetRotX, y: 0, z: 0 },
          dur: 1000,
          shortestPath: true
        });
        // 蓝色盒子移动动画
        rota.setAttribute("animation__2", {
          property: "position",
          to: { x: newX, y: newY, z: newZ },
          dur: 500,
        });
        // 蓝色盒子缩放动画
        rota.setAttribute("animation__3", {
          property: "scale",
          from: { x: 0.01, y: 0.01, z: 0.01 },
          to: { x: 1, y: 1, z: 1 },
          dur: 1000,
        });
        
        // 绿色盒子旋转动画
        caller.setAttribute("animation", {
          property: "rotation",
          to: { x: (totalAngle * 180) / Math.PI, y: 0, z: 0 },
          dur: 1000,
        });

        // 累积角度，每次增加30°（对应一个点位的旋转增量）
        totalAngle += Math.PI/6;
        // 可选：保持角度在合理范围内，避免数值无限增大
        totalAngle = totalAngle % (2 * Math.PI);
      });
    }
});

方案二：调整目标角度的表示方式 #

当clickCount=0时，将目标角度设置为与上一次角度连续的等价角度（如-270°而非90°），确保旋转路径连续：

修改角度计算逻辑：

// 计算角度时，添加12个周期的偏移，确保循环时角度连续
var angle = ((clickCount + 12) % 12 * Math.PI)/6 - Math.PI/2;
// 当clickCount=0时，angle = 2π - π/2 = 3π/2，对应旋转x轴为-270°（等价于90°）

这样，从clickCount=11到0时，蓝色盒子的旋转目标从-240°变为-270°，仅需旋转-30°，与其他点位的旋转幅度一致，消除异常。

内容的提问来源于stack exchange，提问作者Micah Blumberg