Javascript 如何有效地为多个基于三点纹理的画布重用画布

我正在构建一个three.js应用程序，其中有多个纹理需要动态生成（以后可能还会重新生成（更新））。目前，我正在为每个纹理分配一个专用的屏幕外绘制画布，分配如下：

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');
mainTexture = new THREE.Texture(canvas);

然后，当我必须更新纹理时，我使用渲染工具将内容渲染到画布上，然后调用

mainTexture.needsUpdate = true;

这会导致纹理在将来某个时候从画布重新加载其内容。我已经预加载并缓存了画布渲染所需的任何图像，这样它们在进行渲染时不会造成任何延迟

这个过程在更新周期后会导致一段时间的抖动，这显然是由于延迟加载和/或在多个画布中浪费了不必要的大量内存（这只是一种预感；我不知道如何为分配的html5画布管理内存）

所以我的问题是，如何更有效地做到这一点？因此，我不能只使用一个画布，因为如果我同时更新多个纹理，由于纹理的延迟加载特性，它们的更新将覆盖之前完成的更新。有没有办法强制纹理立即同步地从画布重新加载？是否存在另一种可行的策略来避免多次拉票

泰

---

Matti

您是否尝试过用画布制作精灵表，然后根据所需纹理设置UV坐标或纹理偏移

如果没有，试一试，精灵表会创造奇迹

不过要注意画布的大小。我不建议使用大于2048*2048的画布--