我想使用react-三纤维（或使用Drei库）显示电路。

我希望我的用户能够自己构建电路。这意味着他将能够修改（拖/放/删除等...）转弯和线段。它将产生大约 10,000 个段和转弯，因此会产生超过 100,000 个点。

你将如何进行？ （有关我的测试的更多详细信息，请参阅下文）

考虑的解决方案和困难

段

r3f（（react-三纤维）instanceMesh组件（带有矩形）：我需要存储链接到我的转弯/段id的instanceId的地图，这似乎不是不可能的。这似乎是一个很好的解决方案，并且仍然是具有超过 100k 元素的性能。我在这里实现了一个快速示例来测试此逻辑。
drei实例组件：当元素超过 1k 时，它开始变得滞后。您可以在这里玩一个示例（改编自 r3f 示例）

r3finstanceMesh组件：回合可以看作是段的列表。使用这个解决方案，如果我们放大太多，我们可以清楚地看到每个部分。这可能并不理想，但似乎正在发挥作用。另一个问题是，一个回合可以由 100+ 点组成。如果我有 1k 圈，它将绘制 100k 段，这开始很多
line：我们只能创建一种将所有转弯都包含在内的几何体。然而，目前我的所有线条都是链接的（就像我用一支笔一次性绘制它们一样）。此外，我认为用这个解决方案不容易操纵特定的转弯。
Linev2：我们还可以创建与转弯一样多的几何形状。每个回合都将是一个实体，而不是许多段。但是，不建议使用 1K+ 几何形状。使用这个解决方案时，性能一点都不好。
限制对象的数量：我想尝试的另一个解决方案是在一个几何体中绘制所有转弯。在这种情况下，我不会有任何互动。当放大到足够大时，最多只能看到 50 个可见区域，我会添加包含所有交互的实线。这有点棘手，但似乎也是一个很好的妥协。

理想的情况是拥有一个转弯实例（例如线段）。然而，每个转弯似乎都是唯一的，我不知道如何在一个实例中仅创建一个几何体来显示所有可能的转弯。

实现这个逻辑的最佳方法是什么？

我尝试了这种方法，仅绘制最接近的转弯。它保持相当流畅。我将尝试进一步研究这个解决方案：这是一个实现的 GIF 示例：