三张js全景查看器多分辨率图片

Question

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

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

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

所以我尝试加载多分辨率图像而不是单个等距柱状图。

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

1. 将单个等距柱状图图像转换为低分辨率 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（缩放时，需要渲染下一组非常高分辨率的平铺正面图像，如下所示）

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()

演示多分辨率全景

希望这会有所帮助。如果您发现任何问题或需要对脚本进行任何调整，请告诉我。我很乐意提供帮助！