three.js与许多纹理网格

Question

我目前正在尝试创建一个three.js网格，其中有大量的面（数千），并使用纹理。但是，我的问题是，每个人脸在运行时可能会更改其纹理，因此每个人脸都有可能具有不同的纹理。

我尝试使用默认纹理预加载材料数组（对于MeshFaceMaterial），并为每个面分配一个不同的materialIndex，但这会产生很大的滞后。

的研究的位导致here，它说

如果数量是大的（例如每个面可能是潜在地不同），可以考虑不同的解决方案，使用属性/纹理，以驱动不同的每面的外观。

我对着色器是如何工作有点困惑，特别是我甚至不确定如何使用具有属性的纹理。我找不到任何这种在线的例子，因为大多数纹理着色相关的例子，我发现使用制服。

所以我的问题是这样的：有没有一种有效的方式来创建一个大量的纹理网格，可以在运行时改变？如果没有，是否有任何上述属性/纹理想法的例子？

Answer 1

确实，这可能是一个棘手的事情来实现。现在我对GLSL说的不多（我在学习），但我知道的是Uniforms是常量，不会在两次调用之间改变，所以您可能需要一个属性来适合您的情况，但是我欢迎您在这里错了。不过，我的确有一个更简单的建议。

您可以使用1个纹理，您可以“细分”为每张脸所需的所有微小纹理。然后在运行时，您可以从纹理中拉出UV坐标并将其分别应用于面。你仍然会处理计算时间，但是对于一千个左右的面孔，它应该是可行的。我用25k人脸模型进行测试，并且每个tick都快速更换所有人脸。

现在的技巧是导航faceVertexUvs 3维数组。但是，例如用12面的纹理立方体，你可以说重置所有面向等于一边像这样：

for (var uvCnt = 0; uvCnt < mesh.geometry.faceVertexUvs[0].length; uvCnt+=2) { 
    mesh.geometry.faceVertexUvs[0][uvCnt][0] = mesh.geometry.faceVertexUvs[0][2][0]; 
    mesh.geometry.faceVertexUvs[0][uvCnt][1] = mesh.geometry.faceVertexUvs[0][2][1]; 
    mesh.geometry.faceVertexUvs[0][uvCnt][2] = mesh.geometry.faceVertexUvs[0][2][2]; 

    mesh.geometry.faceVertexUvs[0][uvCnt+1][0] = mesh.geometry.faceVertexUvs[0][3][0]; 
    mesh.geometry.faceVertexUvs[0][uvCnt+1][1] = mesh.geometry.faceVertexUvs[0][3][1]; 
    mesh.geometry.faceVertexUvs[0][uvCnt+1][2] = mesh.geometry.faceVertexUvs[0][3][2]; 
} 

在这里我有过每个faceVertexUv（有6种颜色（每边）和我循环立方体当两个三角形成一架飞机时步进2），并将所有的Uvs重置到我的第二侧，这是蓝色的。当然，你需要将坐标映射到一个排序对象中，这样你可以轻松地查询对象返回并重置相应的Uv，但我不知道你的用例。为了完整性，您需要在运行时运行mesh.geometry.uvsNeedUpdate = true;以查看更新。我希望有所帮助。