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;以查看更新。我希望有所幫助。