R3F / three.js - 实例化对象的组合

Question

在following codesandbox example：

由于drei library（2Boxes 和 1 Sphere），不同的几何形状合并在一起。

我想

1. 有很多这种具有良好性能的新几何形状。我认为解决方案是实例化合并的几何体，但我不知道该怎么做。

2. 仍然能够控制每个部分的属性（例如，在特殊情况下使立方体比另一个立方体大）

   请你帮助我好吗 ？

Answer 1

一个解决方案是：

• 为几何的每个部分创建一个instanceMesh
• 通过改变每个几何位置来组装每个零件

您可以使用 2 个 codeSandboxes 找到此解决方案：

• one 使用Drei librairy 但在 10k 元素左右变得迟钝
• one 使用来自 R3F 的 instanceMesh，它可以很好地处理 100k 元素。

我不知道我们是否可以进一步提高性能，但它似乎像这样工作得很好。