Javascript 如何加载球形全景图像平铺

我们有一个web应用程序，它加载一个球形全景图。此应用程序是使用Three.js开发的。纹理是一个360度的图像。随着图像大小变大，加载速度变慢。我们想知道如何通过将图像平铺成小块并仅加载可见部分的平铺来解决这个问题。

---

谢谢你的帮助

通常360张全景图像作为立方体贴图加载，因此

您可以将cubemap拆分为许多图像，就像大多数THREE.js示例中所做的那样

要使图像加载更容易接受，请使用ImageLoader和LoadManager向图像加载添加一个事件：

---

谢谢你。我们不使用立方体。我们使用球体并从单个图像加载纹理。你能不能稍微解释一下“你可以像在大多数THREE.js示例中那样将立方体贴图分割成许多图像”。即使你的源图像是一个360度的球体，纹理仍然是一个正方形，或者很多正方形。看到这一点，我表示赞赏；但我们真正的问题是如何加载区域（FOV周围）并将其显示给用户，而不是用户等待加载整个全景纹理。在这里，我们想到了像谷歌街景那样平铺图像。找到解决方案了吗？我在瓷砖方面也遇到了同样的问题。一张图片正在工作，但添加更多的瓷砖缩放似乎是相当困难的。

var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
    path + 'px' + format, path + 'nx' + format,
    path + 'py' + format, path + 'ny' + format,
    path + 'pz' + format, path + 'nz' + format
  ];

var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;

var refractionCube = new THREE.CubeTexture( reflectionCube.image, THREE.CubeRefractionMapping );
refractionCube.format = THREE.RGBFormat;