如何计算任意显式函数y=f(x)的管状网格法线以避免缩放问题？

我实现了围绕任意曲线y=f(x)的3D圆柱网格，顶点通过以下函数计算：

const P = (x,y,dy,r,u) => {
    const normal = -1/dy;
    return {
      x: x + r*Math.cos(u),
      y: y + r*Math.cos(u) * normal,
      z: r*Math.sin(u)
    }
  }

当|dy|<1时，圆柱出现缩放异常和方向问题。尝试过分段函数处理，但不够优雅。需要一个无需分段、能适配任意dy值的方案，让圆柱始终朝向正确方向且无缩放问题。

问题出在未归一化的法向量上，直接用-1/dy计算的法向量长度会随dy变化，导致缩放异常，还会出现除零问题。正确做法是基于曲线切线向量生成单位法向量：

1. 曲线在点(x,y)处的切线向量为(1, dy, 0)（x方向变化1，y方向变化dy，z方向无变化）。
2. 垂直于切线的法向量可取(-dy, 1, 0)（与切线点积为0，满足垂直要求）。
3. 将该法向量归一化，确保长度始终为1，避免缩放问题。

修改后的顶点计算函数：

const P = (x,y,dy,r,u) => {
    // 计算法向量并归一化
    const length = Math.sqrt(dy*dy + 1);
    const normalX = -dy / length;
    const normalY = 1 / length;
    
    const offsetX = r * Math.cos(u) * normalX;
    const offsetY = r * Math.cos(u) * normalY;
    
    return {
      x: x + offsetX,
      y: y + offsetY,
      z: r * Math.sin(u)
    }
  }

为什么这样有效： #

• 当dy趋近于无穷大（曲线竖直）：length≈|dy|，normalX≈-dy/|dy|（即±1），normalY≈0，此时偏移主要在x方向，符合竖直圆柱的顶点分布。
• 当dy=0（曲线水平）：length=1，normalX=0，normalY=1，偏移主要在y方向，符合水平圆柱的顶点分布。
• 任意dy值下，法向量都是单位长度，r*cos(u)乘以单位向量后，偏移距离始终为r，不会出现缩放异常。

内容的提问来源于stack exchange，提问作者Emre Tekmen