我们已经在 THREE.js 中创建了一个 PCB 查看器，现在我们希望为其添加一些选择功能。这不是一项艰巨的任务，尽管我面临一些性能问题，但我已经可以使用此功能。由于我们希望 PCB 层（形状）的所有功能都可以单独单击和选择（选择时颜色会发生变化），我认为每个形状都需要自己的 THREE.js 网格，以便我们可以单独控制它们的材质。果然，它按预期工作，但当然它像现在一样存在巨大的性能问题，我们没有为 PCB 层上的所有形状使用一个组合网格，而是有数千个网格。
我知道拥有大量网格会降低性能。这显然是正确的。有谁对如何以更高效的方式完成此操作有任何建议吗？现在，我们只需在单击单个形状时更改它们的颜色就足够了。在我的代码更改之前，我们在相同的三个网格上具有相同几何形状的所有形状。我可以以某种方式，以任何方式，保持这个更简单的结构，但仍然单独操纵单个形状/对象吗？对我来说，这听起来很牵强，但我在三个方面没有太多经验
成本主要不是网格的数量，而是绘制调用的数量。每个绘制调用都由一对几何体块（由 THREE.Geometry 表示）和一个着色器程序（由 THREE.Material 表示）组成。虽然 Three.js 确实允许每个网格使用多种材质，但绘制调用的数量保持不变，因此这本身并不能解决您的问题。
相反，您可能需要的是操作概念“对象”，而无需为每个对象提供单独的 THREE.Mesh 和 THREE.Material 实例。例如，如果您知道所选顶点的范围，则可以修改该对象的顶点颜色以突出显示它，或修改顶点位置以移动它。还可以将原始对象 ID 存储为每个对象的顶点属性，然后您可以使用自定义着色器材质对不同对象的材质应用某些更改。
示例：