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

【问题标题】：What is the best practice for loading multiple textures in three.js?在 three.js 中加载多个纹理的最佳实践是什么？
【发布时间】：2014-10-12 09:22:58
【问题描述】：

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

我的关卡由许多几何形状的盒子组成
我需要能够将各种纹理映射到每个盒子几何体（草、水、石头、岩石等）的每个面
我希望尽可能以最高效、最注重性能的方式执行此操作，因此最好将其卸载到 GPU 上
我正在使用 Web GL 渲染器

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

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

或者有更有效的方法吗？

【问题讨论】：

我正在添加评论，因为我不确定这是否直接回答了问题；但我现在使用PxLoader 预加载内容，然后在需要时简单地创建一个new THREE.Texture()，因为图像已经加载。我没有使用精灵表，我所有的纹理都是单独的文件。如果有人有更好的解决方案，请告诉我。

标签： javascript three.js game-engine texture-mapping node-webkit

【解决方案1】：

由于您的纹理是如此轻量级，您在评论中提到的使用单独文件的按需方法可能是正确的方法，因为它可以让您明确控制加载的内容和时间。智能处理很重要，首先加载可见纹理，然后加载可能通过一些运动变得可见的纹理，然后是其他所有内容。充分利用雾和相机视图视锥体/距离属性可以使大部分工作自动化。

将多个纹理排列到一个更大的文件中（2048 x 2048 与您想要的一样高）并立即加载它们当然是一种合理的策略，特别是如果您的互联网连接工作得更好而文件处理更少（咳嗽咳嗽卫星）。但我认为如果你需要更新单个纹理，这种策略就会开始失败，因为这意味着要替换整个图像。如果您有使用某些纹理集的“区域”，如果玩家正在接近该区域并且预加载器尚未启动，那么将这些集预加载为大图像可能是一个好主意。

互联网的整个历史都是关于有效加载媒体的故事，因此您处于良好的基础上。查看浏览器缓存的工作原理，这样您就不必重新加载不需要的图像。希望这会有所帮助。

【讨论】：