Javascript 更新材料'；s纹理贴图与图像快速（每50毫秒左右）会导致巨大的口吃

问题：我应该如何使用图像（存储在HTML5画布中）非常快速地（间隔50毫秒~200毫秒）更新球体的材质纹理贴图，而不会阻塞浏览器

我有一系列全景图像要映射到一个球体上。这些图像每50ms~200ms更新一次。该代码似乎可以工作，但实际上阻塞非常严重-导致一些重绘跳过或等待2~3秒显示

以下是网格代码和纹理（第一个纹理贴图是占位符）：

当触发playPanos（0）时，它会尝试使用HTML5画布中绘制的图像更新材质纹理贴图，该图像存储在数组“loaded_canvas”中：

谢谢。请原谅原型样式代码。

一些提示：

• 无需每次更新球体纹理时都创建新的THREE.Texture（）。创建一次纹理，然后使用以下命令更新它：

  material.map.needsUpdate=true每次在画布上下文中绘制新内容时

• 我想，既然你将画布存储在一个数组中，你没有动态动画，你只有一个循环动画。在这种情况下，您可以存储完成的纹理，只需更新

  material.map

  ，而不用使用数组中存储的画布更新纹理
• 如果画布分辨率太高，请尽量减少像素尺寸。我想你已经准备好了
• 你真的需要：

  侧边：三。双面边

  ？如果您将球体用于skybox，请尝试使用

  THREE.BackSide

---

通过这些优化，您应该能够以60 fps的速度运行纹理更新。

谢谢Adrian。这似乎效果更好。下面是我实际做的改进：a）直接修改material.image=loaded_canvas[curr_id]b）减少球体以使用更少的面c）使用三个面。我宁愿暂时保留这个至关重要的决议。

var geometry = new THREE.SphereGeometry(100.0, 64, 64);
var material = new THREE.MeshBasicMaterial({
  map: THREE.ImageUtils.loadTexture(image_path), // placeholder
  side: THREE.DoubleSide,
});

function playPanos(curr_id) {
  if (curr_id >= loaded_canvas.length) return;

  paintPanos(curr_id);

  setTimeout(function() {
    playPanos(curr_id + 1);
  }, 100); // update every 100ms
}

function paintPanos(curr_id) {
  material.map = new THREE.Texture(loaded_canvas[curr_id]);
  material.map.needsUpdate = true;
}