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

Question

最近切换到three.js作为我的渲染器，我现在想要设置一个映射纹理的系统。但是，我不太确定最佳做法是什么。这是我的用例

• 我有很多盒子几何形状的水平
• 我需要能够将各种各样的纹理映射到每个盒子几何体的每个面（草，水，石头，岩石等）。
• 我想尽可能以最有效，最具性能意识的方式做到这一点，所以如果可能的话，最好将其卸载到GPU
• 我正在使用Web GL渲染器

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

这是必要的，还是我应该只有一个目录中有很多不同的纹理，循环遍历它并为每个纹理创建一个新的THREE.ImageUtils.loadTexture( "textures/someTexture.png" );实例？

或者有更有效的方法吗？

Answer 1

由于纹理非常轻巧，因此您在注释中使用单独文件提及的按需方法可能是正确的方法，因为它可以让您明确控制加载的内容和时间。智能处理很重要，首先加载可见纹理，然后加载一些运动可能会看到的纹理，然后是其他所有纹理。充分利用雾和相机视角平截头体/距离属性可以自动完成大部分工作。

将多个纹理排列成一个更大的文件（2048 x 2048就像你想要的那样高）并立即加载它们当然是一种合法的策略，特别是如果你的互联网连接效果更好，文件处理更少（咳嗽）咳卫星）。但我认为如果你需要更新单个纹理，这个策略就会失败，因为这意味着要替换整个图像。如果你有＆＃34;区域＆＃34;使用某些纹理集的情况下，如果玩家正在接近该区域并且预加载器尚未加载，则将这些集合预加载为大图像可能是个好主意。

互联网的整个历史都是有效加载媒体的故事，因此你可以在很好的基础上进行。查看浏览器缓存的工作原理，以便您永远不会重新加载您不必重新加载的图像。希望这会有所帮助。