Is there a way to incorporate a three.js panorama viewer with multi-resolution images similar to pannellum? Check out pannellum's example here: .
You can find the current code using three.js here:(//codepen.io/w3core/pen/vEVWML).
- Starting from an equirectangular image to a panorama viewer.
- I encountered issues with high-resolution images taking a long time to render.
- Upon researching, I found solutions like pannellum and Kprano, which load multi-resolution images instead of single images.
Therefore, I attempted to load multi-resolution images instead of a single equirectangular image.
Here's the solution I tried:
Converting a single equirectangular image to low-resolution 6-cube map images.
Rendering these images similar to this sample. ()
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);If zooming into any cube map image, I need to render another set of medium-level resolution images.
Currently stuck at this point
How should I proceed with the following:
- How to render the next level resolution images when zooming.
In the sample below, there is an example of zooming into an image...
I have achieved zoom level 0, but I am struggling to render zoom levels 1, 2, 3, etc.
Zoom: 0 (Example of low-resolution cube map front image)
https://i.sstatic.net/JYuwr.jpg
Zoom: 1 (When zooming in, the next set of medium-level resolution tile front images should be rendered like below)
https://i.sstatic.net/crAiI.jpg
Zoom: 3 (Upon further zooming, the next set of high-level resolution tile front images should be rendered like below)https://i.sstatic.net/WtbLV.jpg
Zoom: 4 (When zooming in, the next set of very high-level resolution tile front images should be rendered like below)https://i.sstatic.net/oVOgU.jpg