how to create 2 materials in PSV

textureSwitcher.js

//store materials in global vars
var panorama_default;
var panorama_hover;

//photosphereviewer has a renderer. The renderr uses a mesh (a sphere)
//the sphere has a material, and the material has a texture.
//we store one material
panorama_default = PSV.renderer.mesh.material.clone();
  

  


//now we load the second texture 
//I created a new PSV instance, and a new loader, but maybe it's not necessary.
//I also had to modify the PSV code to make TextureLoader reachable 
//instead of creating a nother instance, maybe we can use PSV.setPanorama and when that's done, grab and clone the updated material.

//lets create a new PSV, which is needed to instantiate a texture loader
const tpsv = new PhotoSphereViewer.Viewer({
    container: "photosphere2",
    panorama: "img/360render.jpg",
    navbar: false,
    loadingTxt: "",
    defaultZoomLvl: 55,
    moveInertia: false
});

//I think PSV already has a texture loader, so that can be used instead, but oh well.
var tLoader = new PhotoSphereViewer.TextureLoader(tpsv);


tLoader.loadTexture("img/360render_highlight.jpg").then((textureData) => {
    //textureData has two properties: texture and panoData.
	//we're not doing any interesting settings, so we only care about the texture.
	
	//we clone the material into the global var 
	panorama_hover = panorama_default.clone();

	//this destroys the previous texture. Not sure if it's needed, but I copied
	//this from the original setTexture method
    if (panorama_hover.map) panorama_hover.map.dispose();
	
	//we set the new material texture, and now we have 2 materials we can use whenever.
    panorama_hover.map = textureData.texture;
});
  
  
  
//when everything is loaded, you can switch to another texture by using 
//PSV.renderer.mesh.material = panorama_hover;