- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
假设我想构建一个 3D 三次贝塞尔曲线,并且我已经有了两个端点和两个控制点的方向(法线向量)。如何选择两个控制点到各自端点的距离,以使曲线尽可能“圆润”?
正式化“很好地圆润”:我认为这意味着最大化曲线中任意两个线段之间的最小角度。例如,具有端点 (10, 0, 0) 和 (0, 10, 0) 以及各自的法向量 (0, 1, 0) 和 (1, 0, 0) 应导致 90° 圆弧。对于二维圆弧的具体情况,我找到了文章 like this one .但我一直无法为我的更一般的情况找到任何东西。
(请注意,这些图像只是为了说明“圆度”概念。我的曲线不能保证是平面对齐的。我稍后可能会替换这些图像以更好地说明这一点。)
这是一个美学问题,如果真正的解决方案未知或太复杂,我会很高兴有一个合理的近似值。我目前的近似过于简单:为两个控制点距离选择两个端点之间距离的一半。更熟悉数学的人可能会想出更好的方法。
(PS:这是给 open-source software 的,我很乐意在 GitHub 上表示感谢。)
编辑:以下是一些其他图像来说明 3D 案例 ( jsfiddle ):
编辑 2:这是ApiNATOMY 不稳定版本的截图让您了解我正在尝试做什么。我正在创建 3D 管来表示血管,连接解剖示意图的不同部分:
(They won't let me put in a jsfiddle link if I don't include code...)
最佳答案
您基本上要求的是使样条曲线的曲率尽可能恒定。
具有恒定曲率的曲线只是一个圆弧,因此尝试将这样的圆弧拟合到您的输入参数中是有意义的。在 2D 中,这很容易:构建穿过起点并与所需方向向量正交的线。对终点做同样的事情。现在将这两条线相交:结果是通过具有所需方向向量的两个点的圆心。
在您的示例中,此交点仅为 (0,0),并且所需的圆弧位于单位圆上。
因此,这为您提供了一个圆弧,您可以直接使用它,也可以使用您已经引用的近似算法。
当两个方向向量共线时,这会崩溃,因此如果出现这种情况,您必须稍微捏一下。如果它们相互指向,您可以简单地使用直线。
在 3D 中,相同的构造为您提供了两个通过端点的平面。将这些相交,你会得到一条线;在这条线上,选择使到两点的距离平方和最小的点。这为您提供了一个球体的中心,该球体接触两个端点,现在您可以简单地在由这三个点跨越的平面中工作,并像在 2D 中一样进行。
关于optimization - 如何为 3D 三次贝塞尔曲线选择控制点距离以优化 'roundness' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30424772/
我是一名优秀的程序员,十分优秀!