三个js全景查看器多分辨率图像

Question

如何使用多分辨率图像实现三个js全景查看器，如pannellum：https://pannellum.org/documentation/examples/multiresolution/。

当前代码在这里使用three.js：（//codepen.io/w3core/pen/vEVWML）。

1. 从equirectangular图像到panoroma查看器。
2. 我遇到了高分辨率图像的问题，需要很长时间才能渲染。
3. 当我寻求一些解决方案时，通过加载多分辨率图像而不是单个图像，Kprano解决了这种情况。

所以我试着加载多分辨率图像而不是单个equirectangular图像。

我尝试过以下解决方案：

1. 将单个equirectangular图像转换为低分辨率6-cube地图图像。

2. 并像这样的样本渲染这些图像。 （https://threejs.org/examples/canvas_geometry_panorama.html）

   var materials = [
       loadTexture('px.jpg'), // right
       loadTexture('nx.jpg'), // left
       loadTexture('py.jpg'), // top
       loadTexture('ny.jpg'), // bottom
       loadTexture('pz.jpg'), // back
       loadTexture('nz.jpg')  // front
   ];
   mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300, 7, 7, 7), materials);
   mesh.scale.x = -1;
   scene.add(mesh);
   

3. 如果放大任何立方体贴图图像，我需要渲染另一个中等分辨率图像。

来这里

如何继续下面的事情

1. 如何在缩放时渲染下一级分辨率图像。

在下面的示例缩放图像中......

我做了缩放0级但我无法渲染zoom1,2,3等。

缩放：0（低分辨率立方体贴图正面图像示例）



缩放：1（缩放时，需要渲染下一组中等级别分辨率的瓷砖正面图像，如下所示）



缩放：3（进一步缩放时，需要渲染下一组高级别分辨率的平铺图像，如下所示）

缩放：4（缩放时，需要渲染下一组非常高级别分辨率的平铺图像，如下图所示）