在three.js中加載多個紋理的最佳做法是什麼？

Question

最近我轉換爲three.js作爲渲染器，現在我想要建立一個映射紋理的系統。但是，我不太確定這是最佳做法。這是我用例

• 我已經做了很多箱的幾何形狀
• 我需要能夠以多種紋理映射到每個盒體幾何形狀的每個面（草，水，石頭的水平，搖滾等）
• 我想這樣做的儘可能最有效的，有意識的表現方式，所以這個卸載到GPU將是最好的，如果可能的
• 我使用Web GL渲染

我目前有我的紋理設置在精靈表中;每個紋理都是64x64像素的正方形，因此每個不同的紋理都會根據其位置偏移64個像素。

這是必要的，還是我應該只是有一個目錄充滿了許多不同的紋理，通過它循環，並創建一個THREE.ImageUtils.loadTexture("textures/someTexture.png");每個新的實例嗎？

或者是否有更有效的方法呢？

Answer 1

由於您的紋理非常輕巧，因此您在評論時使用單獨文件提及的按需方法可能是正確的方法，因爲它可以明確控制什麼是加載的以及何時加載。智能處理非常重要，首先加載可見紋理，然後通過一些移動可以看到紋理，然後是其他所有內容。良好的使用霧和相機視錐/距離屬性可以使其自動化。

將多個紋理整理到一個更大的文件（2048 x 2048高度您想要去的）並一次加載它們當然是合法的策略，特別是如果您的互聯網連接在更少文件處理的情況下效果更好咳嗽咳嗽衛星）。但是我認爲如果你需要更新個人紋理，這個策略就會失敗，因爲它意味着替換整個圖像。如果您的「區域」使用了某些紋理集，如果玩家正在接近區域並且預加載器尚未突破，那麼將這些集預加載爲大圖像可能是一個好主意。

互聯網的整個歷史都是有效加載媒體的故事，所以你是一個非常受歡迎的人物。看看瀏覽器緩存如何工作，所以你永遠不會重新加載你不需要的圖像。希望這可以幫助。