I am currently using pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/) with Three.js to work on local files. Everything works smoothly for small files, but when I try to load a 5000 x 10000 image, it fails to load. I'm wondering what the limitations are in this case and how I could possibly make it work with such large images. Is it possible to load the image using an img tag and then inject it into the application? In the code I have, it looks like this:
var panoimage = new Image();
Could I replace this with something like:
var panoimage = document.getElementById('PanImage');
Where can I find the source code for Image()? Is it a part of JavaScript? I couldn't find any information regarding this class.
EDIT 1
To address the issue, I made some changes to pannellum so that it loads the image from an html image element rather than dynamically loading it.
In pannellum.htm, I added the following html:
<img id='panimage' src="000063.jpg" style="visibility: collapse;"/>
In pannellum.js, I modified line 104 to:
var panoimage = document.getElementById('panimage');
I also commented out the
panoimage.onerror = function() {
This way, the code that should be executed after the image is downloaded runs immediately since the image has already been loaded by that point.
Additionally, I commented out the line that sets the source of the image.
However, instead of downloading the image, it only displays a black screen.