Javascript 在three.js中加载多个纹理的最佳实践是什么？

最近切换到

three.js

作为我的渲染器，现在我想建立一个纹理映射系统。然而，我不太确定这方面的最佳实践是什么。这是我的用例

• 我有很多长方体的几何图形
• 我需要能够将各种各样的纹理映射到每个长方体几何体的每个面（草、水、石头、岩石等）
• 我希望尽可能以最高效、注重性能的方式来实现这一点，因此如果可能的话，最好将其转移到GPU上
• 我正在使用Web GL渲染器

我目前有我的纹理设置在一个精灵表；每个纹理都是64x64像素的正方形，因此每个不同的纹理根据其位置偏移64像素

这是必要的，还是我应该拥有一个包含许多不同纹理的目录，在其中循环并创建一个新的

THREE.ImageUtils.loadTexture实例（“textures/someTexture.png”）每一个

或者有更有效的方法吗？
因为你的纹理非常轻，你在评论中提到的按需加载单独文件的方法可能是正确的方法，因为它可以让你明确控制加载内容和加载时间。智能处理很重要，首先加载可见纹理，然后加载可能随着某些移动而可见的纹理，然后加载所有其他纹理。很好地使用雾和摄影机视图平截头体/距离属性可以使这一过程自动化

将多个纹理排列成一个更大的文件（2048 x 2048是您想要的最高值）并立即加载它们，这当然是一种合法的策略，尤其是如果您的internet连接使用更少的文件处理（cough cough satellite）效果更好的话。但我认为，如果你需要更新单个纹理，这个策略就会失败，因为这意味着要替换整个图像。如果您有使用特定纹理集的“区域”，如果玩家正在接近该区域且预加载程序尚未发出咔嗒声，则最好将这些集作为大图像预加载

互联网的整个历史都是关于有效加载媒体的故事，所以你的处境很好。查看浏览器缓存是如何工作的，这样您就不会重新加载不需要的图像。希望这能有所帮助。
我添加一条评论，因为我不确定这是否能直接回答问题；但我现在使用的是预加载，然后在需要时创建一个新的THREE.Texture（）

，因为图像已经加载了。我没有使用精灵表，我所有的纹理都是独立的文件。如果有人有更好的解决方案，请告诉我。