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

Question

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

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

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

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

我在下面尝试的解决方案：

1. 将单个 equirectangular 图像转换为低分辨率 6 立方体地图图像。

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，但无法渲染缩放 1、2、3 等。

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

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

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

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