replace `equirectangular` to `multiRes` in tours

[aliMurtaja]

Hello Matthew Petroff

I want to replace equirectangular to multiRes.

here's my current code which is working with equirectangular::

let scenes = getListOfExperienceScenes(virtualTourExperience.tourImages); // will load the scenes

setviewer(window.pannellum.viewer(panoramaRef.current, {
    "draggable": true,
    "disableKeyboardCtrl": true,
    "type": "equirectangular",
    "autoLoad": true, 
    "firstScene": virtualTourExperience.tourImages[0].experienceID, // same as first element of `scenes`
    "showControls": false,
    "compass": true,
    "orientationOnByDefault": true,
    "scenes": scenes,
    "sceneFadeDuration": 2000
}));


const getListOfExperienceScenes= (experiencs)=>{

    let dummy = [];
    let mainObje= {};

    dummy= experiencs.map(element => {

    let obje= { 
        [String(element.experienceID)]: {
                "title": element.roomName,
                "type": "equirectangular",
                "panorama": THREE_SIXY_IMG_SHOW_BASE_URL+element.fileUrl, // 360 img --> https://xrtoursdevassets.blob.core.windows.net/2659b7e4-0038-4516-8f26-81e099f6f749/VirtualTours/208/99d5459a-37e5-406b-8c89-82d6e464948a.jpg
                "hotSpots": []  // --> here hotSpot will be added dynamically
            }
        } 
        return obje;
    });
    
    dummy.forEach(element => {
        let abc = element;
        mainObje= {...mainObje, ...abc}
    });
    
    return mainObje;
    
}

I want to replace above code wrote using equirectangular to multiRes

I tried something like below, but didn't work

setviewer(window.pannellum.viewer(panoramaRef.current, {
    
    let scenes = getListOfExperienceScenes(virtualTourExperience.tourImages);

    "firstScene": virtualTourExperience.tourImages[0].experienceID,
    "scenes": scenes,
    "sceneFadeDuration": 2000,

}));

const getListOfExperienceScenes= (experiencs)=>{

    let dummy = [];
    let mainObje= {};

    dummy= experiencs.map(element => {

    let obje= { 
        [String(element.experienceID)]: {
            "title": element.roomName,
            "type": "multires",
            "hotSpots": [],
            "multiRes": {
                "basePath": "",
                "path": "/%l/%s%y_%x",
                "fallbackPath": "/fallback/%s",
                "extension": "jpg",
                "tileResolution": 512,
                "maxLevel": 3,
                "cubeResolution": 1296
            }
        }
        } 
        return obje;
    });
    
    dummy.forEach(element => {
        let abc = element;
        mainObje= {...mainObje, ...abc}
    });
    
    return mainObje;
    
}

It gave me this result (screentshoot attached)

Thanks in advance

[Matthew Petroff]

You need to provide a basePath to the root of the multires tile directory for each image. You're not providing one, so it's trying to load the same images for every scene, starting from the root of your site.

[aliMurtaja]

Ok but I don't have tile's directory, I have only one 360 Image which I need to load using multiRes.
360 Image :: https://xrtoursdevassets.blob.core.windows.net/2659b7e4-0038-4516-8f26-81e099f6f749/VirtualTours/208/99d5459a-37e5-406b-8c89-82d6e464948a.jpg

I thing I can't load image using multiRes, the reason I only have one Image not tile's directory, right ??...

[Luís Henrique Camargo Quiroz]

Hi Ali, You guessed it right! You must create the tiles, from your equirectangular image, using generate.py. This you create the tiles directory for multires visualization. all the best, Luís Henrique Em seg., 8 de jan. de 2024 às 03:52, aliMurtaja ***@***.***> escreveu:

…

Ok but I don't have tile's directory, I have only one 360 Image which I need to load using multiRes. 360 Image :: https://xrtoursdevassets.blob.core.windows.net/2659b7e4-0038-4516-8f26-81e099f6f749/VirtualTours/208/99d5459a-37e5-406b-8c89-82d6e464948a.jpg I thing I can't load image using multiRes, the reason I only have one Image not tile's directory. right ??... — Reply to this email directly, view it on GitHub <#1200 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACPYPLNR5GUCONNYUZWC763YNOJRRAVCNFSM6AAAAABBMYJMX2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBQGQ3DIMJSGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- -- Luis Henrique Camargo Quiroz http://luishcq.br.tripod.com - http://www.christusrex.org/www2/cantgreg http://panoramaslh.net/

[aliMurtaja]

Thanks @luishcq for response.
I got it...

But I don't want to use other library and directory for tiles.
Now, Simply I want to show fallback UI whenever image is too big.
So is there any way to show Fallback UI in that case ??...

[aliMurtaja]

hello @mpetroff @luishcq hope you saw my previous query.
#1200 (comment)

please let me know for the same....

[Matthew Petroff]

Now, Simply I want to show fallback UI whenever image is too big.

Pannellum will display an error message if the image is too big.