three.js三维网格套索工具

您好，
好心的，我想有人帮我开发“套索工具”在三维世界。
就像这张图片：
屏幕截图2019-10-04在6.10.29AM.png1289×410 KB，
用户将单击并拖动鼠标以在任何网格的表面上选择“closed area”（关闭区域）。
并基于所做的选择，他可以从网格中删除“封闭区域”。
我认为这是可能的。但不幸的是，我不知道该怎么做。
希望听到您的反馈。
谢谢
相关：找到网格28上的最短路径
一旦有了循环，您将需要使用循环作为边框，将网格分成两组三角形（假设网格是连接的，没有单独的“孤岛”）。我想我可以通过“整体填充”路径搜索所需的图形（实际上，深度优先或宽度优先并不重要）。
当有两个集合时，可能必须通过创建两个新几何体来分隔它们。
嗨，@EliasHasle感谢您的指点。
所以您确定它与“寻找最短路径”有关。
实际上，我对JS不太熟悉。
好吧，请让我说清楚一点好吗？
谢谢
我不确定这是否需要找到最短路径。例如，如果您可以分割多边形，您可能不必这样做，但我认为搜索最短路径可能会更容易，特别是因为您无论如何都需要一个用于分离步骤的图形表示。
我当然欢迎其他建议，因为搜索将导致光线投射的沉重负担。在高分辨率网格上实时“绘制”是其中一种情况，在这种情况下，自定义光线投射方法可能会派上用场（提示：空间索引、局部跟踪？）
我想应该有人提一下，这不是一项微不足道的任务。它将受益于被分成更小的任务/问题。
对JS有点熟练将是一个很好的首要任务。
了解鼠标如何与3d世界（光线投射网格）交互将是一个很好的下一步。
从那以后，这似乎落在了算法的领域，而且听起来会有相当多很少有人会这样做。
我会先做一个简单的方法（未优化），然后转向优化（空间索引等），似乎很容易或很难。
我认为网格的“三角形几何”应该被操纵。
在我看来：n1. 用户点击并移动鼠标。n2. n3. 并得到“三角形几何”，它有“raycaster”跟随鼠标移动。n4. n5. 设置“三角形几何”的中心点作为当第一点和最后一点之间的距离小于“定义的最小距离”时，构建“套索路径”n6. n7. ，它将通知路径可以通过释放鼠标来关闭。（虚线）n8. 删除“套索区域”中涉及的“三角形”。n9. 我想是这样的。（希望你理解我的意思。）如果我的想法接近目的，我该怎么做？当有两个集合时，可能需要通过创建两个新的几何图形来分离它们。，在这一步中，您所要做的就是重新排序/重建索引并创建两个renderGroups。DevArt:*用户单击并移动鼠标。并获取“三角形几何体”，它在鼠标移动后具有“raycaster”。将“三角形几何体”的中心点设置为构建的一个点“套索路径”问题1：默认情况下，鼠标移动时的光线投射会在网格的所有三角形上进行迭代，问题1是“套索路径”（lasso path）li ul。可能的解决方案：为您的对象优化光线投射。问题2：如果在mousemove事件被触发和处理之前鼠标移动过多个三角形，您不知道连接到哪里。问题1使情况变得更糟。可能的解决方法：寻找最短路径。问题3：使用三角形中心将需要您拆分三角形，这将使工作更加复杂。可能的解决方案是：选择最近的顶点。@pailhead是正确的，这绝非小事。这是可行的，但需要付出巨大的努力。如果你能做到这一点，我相信社区会很高兴分享一些有用的东西。谢谢。但是不能确定。如果可能的话，我想一起解决。一起解决可能也不错。我现在没有时间。我想我至少需要一到两天的时间来让原型工作（或“工作”）……我建议你做更多的研究，分享你拥有的以及你认为自己能够解决的问题，然后寻求更狭隘的帮助。收集更多的建议也无妨，包括对我提出的问题和解决方案的评估。嗨，@EliasHasle我已经在我的git存储库上向你发出了邀请。https://github.com/DevArt002/3d-editor41这个这个项目就是我做的。我想听听你的意见。我克隆了它，并运行了这个示例。还没看过code。看起来您已经在低多边形网格上平滑地进行了光线投射。如果你想平滑地分割它，我认为你必须分割三角形，而不仅仅是跟随顶点。这真的不是我所能想到的那么简单。编辑：我有一些关于三角形分割的未完成的code，是为我的游戏解决方案而准备的：编写游戏和编程挑战，让code变得更好12制作一个三角形列表来添加到每个新的几何体中肯定不是不可能的。Hi，@EliasHasle。p>你周末过得怎么样？刚刚看到你的留言。是的，我知道这条线在模型表面没有对齐。header>stackoverflow.com在符合其曲面16的三维模型上绘制一条线javascript，three.js由Dave Shepardo
询问，晚上11:44PM-22 2月17日协调世界时我找到了这个。你觉得怎么样。我还不明白这一点。我想，一旦我能在曲面上画线，我就可以从线中挤出网格，然后使用3csg.js及csg.js. 但我认为这很难实现，如果你站在我这边，我想知道你的想法。谢谢。div>div：是的，我知道这条线在模型的表面没有对齐。我以前用合适的鼠标尝试演示时没有注意到这条线的绘制。似乎只有当相机处于某个最小距离或更长距离时，绘图才有效。您发布的SO链接引用了与我概述的相同的方法，即使用搜索算法搜索最短路径。不过，A*比Dijkstra或广度优先搜索更适合，因为它专注于找到指向某个特定点的路径，而不是所有点的路径。Hi，@EliasHasleGreatp>，我希望你也检查一下这个。通过区域问题获得相交的面>你好[41%20AM]我已经实现了粗略的套索选择。我想选择不同颜色的区域。我不知道该怎么称呼它。但似乎是“多个相交面”。请帮我做这个。谢谢你的关注。我从来没有使用过这个技术，所以如果我说的是废话，请原谅我……但这不是更容易与GPU挑选？您绘制的区域定义了一个像素阵列，然后为每个面指定了唯一的颜色，然后检查每个像素中的颜色以检索定义区域中的所有面？编辑：不会选择背景中的人脸，不过…谢谢你的建议，@felixmariotto，strong。但是因为我是新来的Three.js，好像我没听懂。你是说GLSL？是的，像这样的14，我自己也从来没有用过这个技巧，所以这完全是理论上的……谢谢，@felixmariotto，但是，我是GLSL的新手……felixmariotto的建议不错。参考资料提供了一种基于GPU的拾取的简单方法，这是高级光线投射方法的替代方法。我建议使用鼠标位置的知识来修改相机投影（仅用于拾取的相机），以便只渲染单击的像素。这还需要将渲染目标尺寸设置为1x1。无论如何，GPU拾取不一定能解决连接点的基本挑战。有人在网格上实现过套索工具吗？我需要你的帮助
10. 并获取“三角形几何体”，它在鼠标移动后具有“raycaster”。n11. n12. 将“三角形几何体”的中心点设置为构建的一个点“套索路径”问题1：默认情况下，鼠标移动时的光线投射会在网格的所有三角形上进行迭代，问题1是“套索路径”（lasso path）li ul。可能的解决方案：为您的对象优化光线投射。问题2：如果在mousemove事件被触发和处理之前鼠标移动过多个三角形，您不知道连接到哪里。问题1使情况变得更糟。可能的解决方法：寻找最短路径。问题3：使用三角形中心将需要您拆分三角形，这将使工作更加复杂。可能的解决方案是：选择最近的顶点。@pailhead是正确的，这绝非小事。这是可行的，但需要付出巨大的努力。如果你能做到这一点，我相信社区会很高兴分享一些有用的东西。谢谢。但是不能确定。如果可能的话，我想一起解决。一起解决可能也不错。我现在没有时间。我想我至少需要一到两天的时间来让原型工作（或“工作”）……我建议你做更多的研究，分享你拥有的以及你认为自己能够解决的问题，然后寻求更狭隘的帮助。收集更多的建议也无妨，包括对我提出的问题和解决方案的评估。嗨，@EliasHasle我已经在我的git存储库上向你发出了邀请。https://github.com/DevArt002/3d-editor41这个这个项目就是我做的。我想听听你的意见。我克隆了它，并运行了这个示例。还没看过code。看起来您已经在低多边形网格上平滑地进行了光线投射。如果你想平滑地分割它，我认为你必须分割三角形，而不仅仅是跟随顶点。这真的不是我所能想到的那么简单。编辑：我有一些关于三角形分割的未完成的code，是为我的游戏解决方案而准备的：编写游戏和编程挑战，让code变得更好12制作一个三角形列表来添加到每个新的几何体中肯定不是不可能的。Hi，@EliasHasle。p>你周末过得怎么样？刚刚看到你的留言。是的，我知道这条线在模型表面没有对齐。header>stackoverflow.com在符合其曲面16的三维模型上绘制一条线javascript，three.js由Dave Shepardo
询问，晚上11:44PM-22 2月17日协调世界时我找到了这个。你觉得怎么样。我还不明白这一点。我想，一旦我能在曲面上画线，我就可以从线中挤出网格，然后使用3csg.js及csg.js. 但我认为这很难实现，如果你站在我这边，我想知道你的想法。谢谢。div>div：是的，我知道这条线在模型的表面没有对齐。我以前用合适的鼠标尝试演示时没有注意到这条线的绘制。似乎只有当相机处于某个最小距离或更长距离时，绘图才有效。您发布的SO链接引用了与我概述的相同的方法，即使用搜索算法搜索最短路径。不过，A*比Dijkstra或广度优先搜索更适合，因为它专注于找到指向某个特定点的路径，而不是所有点的路径。Hi，@EliasHasleGreatp>，我希望你也检查一下这个。通过区域问题获得相交的面>你好[41%20AM]我已经实现了粗略的套索选择。我想选择不同颜色的区域。我不知道该怎么称呼它。但似乎是“多个相交面”。请帮我做这个。谢谢你的关注。我从来没有使用过这个技术，所以如果我说的是废话，请原谅我……但这不是更容易与GPU挑选？您绘制的区域定义了一个像素阵列，然后为每个面指定了唯一的颜色，然后检查每个像素中的颜色以检索定义区域中的所有面？编辑：不会选择背景中的人脸，不过…谢谢你的建议，@felixmariotto，strong。但是因为我是新来的Three.js，好像我没听懂。你是说GLSL？是的，像这样的14，我自己也从来没有用过这个技巧，所以这完全是理论上的……谢谢，@felixmariotto，但是，我是GLSL的新手……felixmariotto的建议不错。参考资料提供了一种基于GPU的拾取的简单方法，这是高级光线投射方法的替代方法。我建议使用鼠标位置的知识来修改相机投影（仅用于拾取的相机），以便只渲染单击的像素。这还需要将渲染目标尺寸设置为1x1。无论如何，GPU拾取不一定能解决连接点的基本挑战。有人在网格上实现过套索工具吗？我需要你的帮助
Lasso tool for 3D meshn

three.js三维网格套索工具

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形