三维场景中选取字幕的Three.js算法

Question

我正在使用THREE.js创建一个3D模型编辑器应用程序，您可以在其中加载CAD模型并将其显示在屏幕上。您可以在场景中的任意位置平移、缩放和旋转相机，以从任何角度查看CAD模型。

我想要添加支持，以便能够在屏幕上绘制任意矩形(选框选择框)，并在此框内的任何我想成为选中。

用于此操作的好算法是什么？

我的第一个想法是把每个加载的CAD部件(可以选择)，并将其边界框投影到屏幕上。然后测试这些投影边界框中的每一个与屏幕上绘制的选择框是否匹配。这应该可以工作，但我担心这将是非常缓慢的大型CAD模型与1000的可选部件。

有没有更好的方法在3D中进行选取框选择？光线投射能以某种方式加快选择速度吗？

Answer 1

如果不知道你的cad模型的更多细节，就很难给出确切的相关建议，但我可以建议一些我可能会尝试的东西。

使用层次边界框

如果具有多级网格树，则可以为树的非叶节点生成边界框。3中不直接支持这一点，但您可以手动创建这些对象，并在检查子对象是否在字幕中之前检查这些对象。

如果您的树在空间上组织得不是很好，或者非常平坦，那么您可以构建一个八叉树，并在检查网格之前遍历八叉树节点。

当然，每当网格在CAD模型中移动时，这些数据结构都必须更新。

缓存世界边界

如果在世界空间中的所有网格上缓存边界框的版本，则可以从世界空间中的选框创建一个截体，并检查所有网格边界，而无需对这些长方体进行任何变换。

异步检查

如果需要很长时间，您可以在多个帧上收集所有相交的边界，而不是收集单个帧上的所有相交边界。

不幸的是，我不认为光线投射能在这里为你做很多事情。

希望这能有所帮助！