在three.js中，跨共享相同几何体的多个网格独立更新面颜色的最有效方法是什么？
在一个three.js项目viewable中，我有500个立方体，都是相同大小的，都是静态定位的。在每个立方体上，五个面始终保持相同的颜色；但是，第六个面的颜色可以动态更新，并且这种修改会在单个帧中的许多立方体中发生，并且也会在大多数帧中发生 我已经能够以几种不同的方式实现这个场景，但我对我尝试过的任何一种方法的性能都不完全满意。我知道我一定还没有找到正确的技术，或者我没有完全正确地实现。从性能的角度来看，在保持每个多维数据集的独立性的同时，更改这些多维数据集面的颜色的最佳方法是什么 以下是我迄今为止所尝试的： 创建500个单独的立方体和网格实例。更改几何体面的颜色，如以下答案中所述：。到目前为止，这种方法对我来说表现最好，但500个相同的几何图形似乎不太理想，特别是因为我无法用一个好的GPU实现常规的60fps。在这里渲染大约需要11-20毫秒 创建一个立方体度量，并在500个网格实例中使用它。创建MeshBasicMaterials数组以为每个网格创建MeshFaceMaterial。五个MeshBasicMaterial实例相同，表示每个立方体的五个静态着色边。创建唯一的MeshBasicMaterial以添加到每个网格的MeshFaceMaterial。使用thisMesh.material.materials[3].uniforms.diffuse.value.copynewColor更新此唯一材质的颜色。这种方法的渲染速度比第一种方法（90-110毫秒）慢得多，这让我感到惊讶。可能是因为500个立方体，每个立方体有6种材料=3000种材料需要加工在three.js中，跨共享相同几何体的多个网格独立更新面颜色的最有效方法是什么？,three.js,Three.js,在一个three.js项目viewable中，我有500个立方体，都是相同大小的，都是静态定位的。在每个立方体上，五个面始终保持相同的颜色；但是，第六个面的颜色可以动态更新，并且这种修改会在单个帧中的许多立方体中发生，并且也会在大多数帧中发生 我已经能够以几种不同的方式实现这个场景，但我对我尝试过的任何一种方法的性能都不完全满意。我知道我一定还没有找到正确的技术，或者我没有完全正确地实现。从性能的角度来看，在保持每个多维数据集的独立性的同时，更改这些多维数据集面的颜色的最佳方法是什么 以下是我迄
如果您能提供任何建议，我们将不胜感激 我发现three.js会为场景中的每个网格执行WebGL绘制，这才是真正影响我性能的原因。我研究了yaku关于使用BufferGeometry的建议，我相信这将是一个很好的途径，但是使用BufferGeometry似乎相对困难，除非您对WebGL/OpenGL有丰富的经验 然而，我发现了一个非常有效的替代方案。我仍然为我的500个立方体中的每个立方体创建了单独的网格，但随后我使用GeometryUtils.merge将这些网格合并到一个通用几何体中，以表示整个立方体组。然后，我使用该组几何体创建了一个组网格。GeometryUtils.merge的解释如下 这种策略特别好的地方在于，您仍然可以访问作为合并的基础几何体/网格一部分的所有面。在我的项目中，这使我仍然可以完全控制我想要控制的面部颜色：
// For 500 merged cubes, there will be 3000 faces in the geometry.
// This code will get the fourth face (index 3) of any cube.
_mergedCubesMesh.geometry.faces[(cubeIdx * 6) + 3].color
答案可能涉及使用自定义着色器材质或扩展的three.js材质。所有立方体都将具有相同的材质，并且在绘制时，面颜色将由着色器计算出来。此外，这可能是BufferGeometry的一个很好的用例。这个GeometryUtils.merge与BufferGeometry本质上不是一样吗？