我们已经在THREE.js中创建了一个PCB查看器，现在我们正在寻找添加一些选择功能。这不是一个困难的任务，我已经有了这个功能，尽管我面临一些性能问题。因为我们希望PCB层（形状）的所有功能都是单独点击和选择的（颜色在选择时会发生变化）我认为每个形状都需要自己的THREE.js Mesh，这样我们就可以单独控制它们的材质了。果然，它像预期的那样工作，但当然它现在有大量的性能问题，而不是有一个组合网格的所有形状的PCB层上，我们有数千。
我知道有很多网格会降低性能。这显然是真的。有没有人有任何提示，如何才能做到这一点，在一个更有效的方式？现在，我们只需要在单击时更改单个形状的颜色就足够了。在我的代码更改之前，我们在同一个THREE Mesh上有相同几何形状的所有形状。我可以以某种方式，以任何方式，保持这种更简单的结构，但仍然单独操作inidivudal形状/对象？对我来说，这听起来很牵强，但我不是太有经验的三
1条答案
按热度按时间w7t8yxp51#
成本主要不是 * mesh * 的数量，而是 *draw调用 * 的数量。每个draw调用由一个成对的几何体块（由THREE.Geometry表示）和一个着色器程序（由THREE.Material表示）组成。虽然three.js确实允许每个mesh有多个材质，但draw调用的数量保持不变，因此这本身并不能解决您的问题。
你可能需要的是操作概念上的“对象”，而不需要为每个对象单独设置THREE.Mesh和THREE.Material示例。例如，如果你知道所选顶点的范围，你可以修改该对象的顶点颜色以突出显示它，或者修改顶点位置以移动它。
也可以将原始对象ID存储为每个对象的顶点属性，然后可以使用自定义着色器材质为不同的对象应用材质中的某些更改。
范例：
https://threejs.org/examples/#webgl_interactive_cubes_gpu