Three.js 中一组共面点的最佳拟合矩形

Posted

技术标签:

【中文标题】Three.js 中一组共面点的最佳拟合矩形【英文标题】:Best Fit Rectangle From Set of Coplanar Points in Three.js 【发布时间】:2018-04-21 20:46:43 【问题描述】:

首先,如果某处有解决方案,我深表歉意,但我已经对 Three.js 和 A-Frame 文档以及 Stack Overflow 进行了大量研究,但还没有找到我想要的正在寻找。

我想做的是从一组我已经知道是共面的 Vector3 中创建一个最适合的 A-Frame 平面。如果平面的角度是 90 的倍数,这可以很容易地完成,但其他任何东西和 Box3s 的 .setFromPoints() 算法都不能按我需要的方式工作。

从 Three.js 到 A-Frame 的转换我很可能自己可以处理,但如果有人想解决这个问题,他们非常欢迎。我只需要创建一个真正有意义的矩形平面。

基本上,我想创建一个这样的算法:

创建粗体平面,而不是浪费太多空间的打火机框/平面。

我不想创建完全适合这些点的自定义几何图形,我已经这样做了。我实际上只是想要一个只有高度、宽度、位置和旋转属性的 A-Frame 平面。我知道这不太精确,但它更适合我的工作。

【问题讨论】:

@Soronbe 良好的性能显然是首选,但不是必需的。只是想让事情顺利进行。任何给定集合中的顶点数量通常在 10-15 个左右,但最多的是 405 个。 【参考方案1】:

首先找到通过这些点的最佳线。这被称为“线拟合”,就像这里:http://***.com/questions/2352256/fit-a-3d-line-to-3d-point-data-in-java,在二维而不是三个维度上应该很容易做到这一点。参见这里:https://en.wikipedia.org/wiki/Deming_regression 这条线给你角度,点的垂直距离的最小值是矩形的高度,垂直脚点到线的位置的最小值是矩形的宽度。 或者您将所有点旋转直线的负角,然后简单地计算矩形宽度和高度的点的 x 和 y 分量的最小值。

【讨论】:

【参考方案2】:

好的,也许我之前的回答很难实现。这是另一个想法:计算您的点的凸包(https://en.wikipedia.org/wiki/Graham_scan 提供了一种简单有效的伪代码算法)。内点不相关。最佳矩形必须与凸包的至少一条边重合。使用凸包边的所有角度计算具有该角度的矩形的尺寸。然后取最小值。

【讨论】:

【参考方案3】:

对于搜索在threejs 中计算共面点的最佳拟合矩形的人,这里有一个简单的解决方案,实现起来相当快:

在平面 A、B、C 上选取任意 3 个共面点并计算平面法线。

然后planeNormal = crossVectors(A-B, B-C);。或者,如果您有面孔,则取所有面孔的平均法线。

旋转所有点,使平面法线为Vector3(0,0,1)

所有积分:point.applyMatrix4(new Matrix4().makeRotationFromQuaternion(new Quaternion().setFromUnitVectors(new Vector3(0,0,1), planeNormal).invert()))

计算变换点的边界框大小

size = new BoundingBox().setFromPoints(points).getSize(new Vector3());

这将给出xy 组件中的矩形宽度和高度。如果所有点共面,z 应该是 0

现在我们有了矩形的法线、宽度和高度,足以创建平面几何图形。

【讨论】:

以上是关于Three.js 中一组共面点的最佳拟合矩形的主要内容,如果未能解决你的问题,请参考以下文章

为啥要进行平面点云数据的拟合

three.js Mesh 不根据方向显示矩形

如何从 Three.js 画布中保存图像?

Three.js导航网格实现教程NavMehs

Three.js导航网格实现教程NavMehs

是否有可能在三个js中勾勒出three.js形状的边缘?