使用四元数实现 HTML/CSS 立方体的平滑鼠标拖拽旋转与惯性动画-html教程-PHP中文网

本文详解如何用纯 JavaScript + 四元数（Quaternion）精准控制 3D CSS 立方体的交互式旋转，修复常见 rotate3d 应用错误，并集成物理感十足的摩擦衰减与角速度惯性动画。

本文详解如何用纯 javascript + 四元数（quaternion）精准控制 3d css 立方体的交互式旋转，修复常见 `rotate3d` 应用错误，并集成物理感十足的摩擦衰减与角速度惯性动画。

在 Web 3D 交互中，直接叠加 CSS rotateX/rotateY 变换易导致万向节死锁（Gimbal Lock），而使用四元数可避免该问题并实现稳定、可复合的旋转。原代码的核心缺陷在于两点：一是 rotate3d(x,y,z,angle) 的角度参数误传了 w 值而非实际弧度角；二是未对累积旋转做归一化，导致数值漂移和失真。

正确做法是：将四元数 q = (x, y, z, w) 转换为等效轴角表示后传入 CSS —— 其中旋转轴为 (x, y, z)，旋转角度为 2 * acos(w)（单位：弧度）。关键修正如下：

// ✅ 正确：从四元数提取旋转角（需确保四元数已归一化）
const q = this.__value;
const angle = 2 * Math.acos(Math.max(-1, Math.min(1, q.w))); // 防 NaN
this.__cube.style.transform = `rotate3d(${q.x}, ${q.y}, ${q.z}, ${angle}rad)`;

此外，原始 fromAngleAxis 方法将角度与轴向量耦合，而优化后的 Quat.fromAxis(axis) 更符合物理直觉：输入一个带长度的轴向量，其模长即为旋转弧度（|axis| = θ），自动完成 sin(θ/2) 和 cos(θ/2) 计算，大幅提升可读性与组合性。

为实现自然拖拽+惯性旋转，需引入角速度向量 velocity 与指数衰减模型：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

拖拽时：将鼠标位移 Δ 投影为垂直于视线的旋转轴（(-Δy, Δx, 0)），缩放为角速度增量；
松手后：按 velocity *= Math.exp(-delta * friction) 衰减，并将每帧衰减量积分成微小旋转，再累乘到当前朝向。

以下为精简可靠的核心逻辑：

// 惯性更新循环（requestAnimationFrame 驱动）
let lastUpdate = 0;
function updateFrame(timestamp) {
  const delta = (timestamp - lastUpdate) / 1000;
  lastUpdate = timestamp;

  if (!mouse.down) {
    const decay = Math.exp(-delta * friction);
    velocity.x *= decay;
    velocity.y *= decay;
    velocity.z *= decay;

    // 积分：小角度近似下，θ ≈ |v| * Δt
    const theta = velocity.length() * delta;
    if (theta > 1e-5) {
      const axis = new Vec3(velocity.x, velocity.y, velocity.z).normalize();
      const rot = Quat.fromAxis(axis.scale(theta));
      orientation.set(Quat.mul(rot, orientation.get()));
    }
  }

  requestAnimationFrame(updateFrame);
}
updateFrame(0);

⚠️ 重要注意事项：