Three.js全景浏览器多分辨率图像

Question

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

当前的代码在这里使用了three.js：(//codepen.io/w3core/pen/vEVWML)。

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

因此，我尝试加载多分辨率图像而不是单个等距图像。

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

1. Converting single equirectangular image to low resolution 6-cube map images.

2. And render those images like this sample. (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. If zooming in any cube map image, i need to render my another medium level resolution images.

卡在这里了

如何进行以下操作

1. 当缩放时如何呈现下一级分辨率图像。

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

我已经制作了0级缩放，但我无法制作渲染缩放1、2、3等级的图像。

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

Zoom: 1（当缩放时，需要呈现下一组中等分辨率瓦片前景图像，如下所示）

缩放等级: 3 (当进一步缩放时，需要渲染下一组高分辨率的瓦片前景图像，如下所示)

缩放等级: 4 (当缩放时，需要渲染下一组非常高分辨率的瓦片前景图像，如下所示)

- Subramani

---

看一下[ask]。 - pvg

谢谢@pvg提供的链接。现在请看一下我的问题。 - Subramani

@AndiAR，你解决了这个问题吗？ - mudin

如果有人解决了，请通知我。 - Humoyun Ahmad

终于搞定了！请看下面的答案。 - Roman Grinev

Answer 1

我尝试了几个月来解决你所说的问题。虽然不容易，但最终还是解决了。我创建了一个基于threejs的多分辨率全景图查看器开源软件包。它可以在GitHub上找到：Avansel Viewer，文档在这里。

首先，安装该软件包：

npm i avansel

以下是一个使用示例：

import { Avansel } from "avansel"

const container = document.querySelector('#avansel')

const params = [
    { tileSize: 374, size: 374, fallback: true },
    { tileSize: 512, size: 749 },
    { tileSize: 512, size: 1498 },
    { tileSize: 512, size: 2996 },
    { tileSize: 512, size: 5992 },
]

new Avansel(container)
    .multires(params, () => (s, l, x, y) => {
        l = parseInt(l) + 1
        return `/assets/images/multires-1/${l}/${s}${y}_${x}.jpg`
    }).start()

多分辨率全景演示

希望这能帮到您。如果您发现任何问题或需要脚本的任何调整，请告诉我。我很乐意帮忙！

- Roman Grinev