pchen66 / panolens.js

Javascript panorama viewer based on Three.js
https://pchen66.github.io/Panolens/
MIT License
2.79k stars 498 forks source link

Blurred image #403

Open R0TIPRATA opened 2 years ago

R0TIPRATA commented 2 years ago

Hi, awesome work with your plugin :) I was able to upload my first image successfully as below.

image

However, when I put it in a popover for my gallery, the image became pixelated.

image

I'm not sure why this is the case? Here is my code:

In JS file:

const getImage = function (index) {
    fullURL = filePath[index][0];
    if(!panorama){
        container = document.querySelector('#main-360-viewer');
        viewer = new PANOLENS.Viewer( { container: container } );
     }
     panorama = new PANOLENS.ImagePanorama(fullURL);
     viewer.add( panorama );
     popup.style.transform = `translateY(0)`;
     popup.style.zIndex = "3";

     selectedIndex = index;
     nextIndexURL = setNextIndex(index);
     prevIndexURL = setPrevIndex(index);
}

//on clicking > btn in popover
const getNextIndexURL = function (e) {
  viewer.remove(panorama);
  panorama.dispose(fullURL);
  getImage(nextIndex);
};

CSS file:

#main-360-viewer {
  width: 600px;
  height: 300px;
  margin-bottom: 24px;
}

Any help would be greatly appreciated!