I'm encountering an issue with the texture quality in my 360 panoviewer using Three.js. I've been working off of this code and it appears that my settings are consistent with the original.
However, despite using the same image, my version seems to be lower in quality. It looks a bit distorted compared to the original, even though all the geometry for Three.js seems to match.
Original Image: https://i.sstatic.net/NmfKM.jpg
My Version: https://i.sstatic.net/hjaPR.png
You can find the original version I copied from here: https://codepen.io/msummers40/pen/ALboOA
Below is the code I am using:
var camera, scene, renderer;
var dataContainer = document.getElementById('data-container');
var imageFile = dataContainer.getAttribute('data');
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
// Rest of the JavaScript code...