我的气动阻力模型存在什么问题？JavaScript二维烟花模拟拖拽异常排查

嘿，我完全懂你说的这个别扭的“方形效应”有多闹心——本来应该是流畅的抛物线或爆炸轨迹，结果粒子像撞到了隐形方块一样，在对角线方向的阻力明显不对劲，对吧？这个问题几乎肯定是因为你对速度的x、y分量单独做了独立的阻力处理，而没有遵循真实物理中阻力的方向规则。

问题根源 #

真实世界里，流体阻力的方向始终与物体的运动方向完全相反，大小只和速度相关（低速下和速度成正比，高速下和速度平方成正比）。但如果像很多新手那样，直接写vx *= 0.95、vy *= 0.95这种代码，本质是对x、y轴向分别做指数衰减，这就会产生方向依赖的阻力：

• 当粒子沿x或y轴运动时，只有一个分量被衰减
• 当粒子沿对角线运动时，x和y分量同时被衰减，合成后的速度衰减速度会比轴向运动时快得多，看起来就像对角线方向有额外的“阻碍”，形成了你看到的方形轨迹。

正确的阻力实现步骤 #

要彻底解决这个问题，你需要基于速度矢量的方向来计算阻力，而不是分开处理轴向分量：

1. 计算当前速度的模长
   先算出粒子的实际运动速度大小，用来确定阻力的强度和方向：

   const speed = Math.sqrt(vx * vx + vy * vy);
   

   这里要注意：如果speed非常小（比如小于0.01），直接跳过阻力计算，避免后续除以0导致NaN。

2. 确定阻力的方向
   阻力方向与运动方向相反，所以我们先算出运动方向的单位矢量，再取反：

   const dirX = vx / speed;
   const dirY = vy / speed;
   // 阻力方向是运动方向的反方向
   const dragDirX = -dirX;
   const dragDirY = -dirY;
   

3. 计算阻力加速度的大小
   根据你要模拟的场景选择阻力模型：

   • 低速场景（比如小粒子缓慢运动）：用线性阻力，大小和速度成正比

     const dragAccel = dragCoefficient * speed;
     

   • 高速场景（比如烟花爆炸的高速粒子）：用平方阻力，大小和速度平方成正比

     const dragAccel = dragCoefficient * speed * speed;
     

   这里的dragCoefficient是你可以调整的参数，数值越小阻力越弱。

4. 分解阻力加速度到轴向并更新速度
   把阻力加速度和重力加速度一起加到速度上：

   // 假设重力只有y方向向下，gravityY为正数
   const gravityX = 0;
   const gravityY = 0.5;
   
   vx += dragDirX * dragAccel + gravityX;
   vy += dragDirY * dragAccel + gravityY;
   

完整的速度更新代码示例 #

把上面的步骤整合起来，加上边界处理：

function updateParticle(vx, vy, dragCoefficient, gravityY) {
  const speed = Math.sqrt(vx * vx + vy * vy);
  // 避免速度过小时的计算问题
  if (speed > 0.01) {
    const dirX = vx / speed;
    const dirY = vy / speed;
    // 这里用平方阻力作为示例，你可以换成线性的
    const dragAccel = dragCoefficient * speed * speed;
    vx += -dirX * dragAccel;
    vy += -dirY * dragAccel + gravityY;
  } else {
    // 速度几乎为0时，直接让速度归0，避免抖动
    vx = 0;
    vy = 0;
  }
  return { vx, vy };
}

用这种方式实现后，阻力会始终与粒子的运动方向保持相反，不管粒子往哪个方向移动，阻力的作用都是一致的，那个讨厌的方形效应就会消失，烟花的运动轨迹会更贴近真实的物理效果。

内容的提问来源于stack exchange，提问作者Jacob Marciniec