Three js panorama viewer multiresolution images

Question

How to implement three js panorama viewer with multi resolution images, Like pannellum:https://pannellum.org/documentation/examples/multiresolution/.

Current code is here using three.js:(//codepen.io/w3core/pen/vEVWML).

1. From equirectangular image to panoroma viewer.
2. I have faced problem for high resolution images, takes long time to render.
3. When i seek some solution pannelum and Kprano solved this case by loading multi resolution images instead of single images.

So i tried to do loading multi resolution images instead of single equirectangular image.

Solution i tried below:

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.

Struck here

How to proceed below things

1. How to render next level resolution images when zooming.

In Below sample zoom image...

I have made zoom 0 level but i couldnt make rendering zoom1,2,3 etc.

Zoom : 0(Example of low resolution cube map front image)

Zoom: 1 (When zooming , Need to render next set of medium level resolution tile front images like below)

Zoom : 3 (When zooming further, Need to render next set of high level resolution tile front images like below)

Zoom : 4 (When zooming , Need to render next set of very high level resolution tile front images like below)

Answer 1

I was trying to work on a solution to the problem you are talking about for a couple of months now. It was not an easy one but finally got it working. I've created the threejs-based open-source package of the multiresolution panorama viewer. It is available here on GitHub: Avansel Viewer and documentation is here.

First, install the package:

npm i avansel

And here is an example of how to use it:

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

Demo multiresolution panorama

Hope this would help. Let me know if you found any issues or need any ajsustmens of the script. I would be happy to help!