I came to find this pen https://codepen.io/VeinSyct/pen/YPWLrrV and I want to change the 360 pictures with my insta 360 X2 pics the size of 1.2G each image. Just a photo of my new restaurant. Can you guide me?
Look, once saying 1.2G you mean 1.2 gigabyte for the image? ~1,200.00 MB? That is HUGE for the web to handle. I know those 360 images can go wild (as you are using many high-res cameras), but I don’t think you should go with that high pixels!
First, do your best to find a way to optimize that image (reduce that size aggressively to few mega bytes.) Can you imagine how long will it take to load it if it was only 100 MB, aim for < 40MB.
Then, actually have countless ways to view in Three.js, but the best way that I have used using CubeTextuers() (CubeTexture - Three.js Docs) along with orbit controls.
I wish this helps.