VR Panoramas in Hype

I am creating 360 degree HTML5 panoramas using Pano2VR by Garden Gnome.
Any suggestions on how to embed them into Hype?
I tried copying the output html file created by Pano2VR into the HTML widget box and positioning the various source files in the relevant path. Does not work.

The HTML widget box is basically like an iFrame. So, is the panorama embedded in the Hype project or is the project being linked externally?

If it’s embedded locally, the URL has to point to the Resource Library…


I didn’t test it though. I’m in a bit of a rush right now. HA HA!

Thanks Michael.
I’ll give it a try.

If you can show us a list of the files that are required to run the Pano2vr then we can be a bit more specific i.e. where to put them exactly

Will send them tomorrow.

You can use the HTML widget.
I made this app with some panoramas

Hi Michelangelo
Sorry to be a pain.
I tried placing the Pano2VR output files in the Hype Resource folder in
various combinations, without success.
I am sending you a zipped folder with:

  1. Simple demo Hype file containing an HTML widget with the HTML data from
    the Pano2VR HTML output file
  2. The Hype exported HTML5 folder
  3. The Pano2VR output folder

If its not too much effort, I’d be most grateful if you could place the
files in the corrects positions. This way I’ll be able to follow for other
Please help.zip (443 KB)

I’m sure it’s a little late for the answer, but can be helpful to others: the easiest way to make it work is uploading the folder of Pano2VR to the server and adding the html link inside the URL specified of the HTML Widget

1 Like

Never too late.
Many thanks.

Extremely helpful - Thank You.

I cant figure out now how to make it work for a local web app for iPad, it doesnt work, im not sure if its part of the 8.xx IOS bug for playing html5 videos. If someone knows how to do it i’ll be very thankful

You don’t need to import the pano in Hype.
You should use a local path. better with an external folder with all files of the pano.

enbedded folder:
images/…all images

1 Like

Thank you michelangelo, actually, with both ways i get the pano2vr container in the web app, but only the first image is displayed and i can move it, but only this one, is like the calling of the other images were broken or like the web app doesnt recognize the xml.

yes, it seems a bug or an incorrect setting in the pano

Any tips on placing the pano2vr container in the HTML Widget? I only get 404 errors whether it’s placed in the project root or in index.hyperesources.

I discovered a workaround that appears to work somewhat: By exporting the Hype project to HTML5, then manually moving the pano files to the index.hyperesources directory.

Using Hype Pro 3.5.3

You can put the pano folder in the same root of the main hype folder ( via FTP). You don’t need to move the pano inside the Hype folder.
Just use the right relative URL (see my example above)

Thanks for your reply michelangelo. I’ve definitely used the method you’ve outlined above but with no luck. Perhaps it’s an issue with Panotour Pro/Krpano/Pano2VRs being run locally or a bug in Hype.

I’m currently building an iPad app with Hype and Xcode and have had success so far with Panotour Pro panoramas running offline, but since I’ve had to add the pano files after Hype overwrites the .hyperesources folder, it certainly isn’t ideal, especially since I can’t preview the scenes with panoramas in Hype or Hype Reflect. It’s only after I export to HTML5 and add the pano resources that I can view the panoramas, which makes for a clunky workflow.

Hey, so trying to add a pano2Vr project into Hype. I am following along with what’s been mentioned, with no success. Here’s a movie showing what I’ve done. http://www.girafxmedia.com/carolyn/hypeP2VR.mov

Any chance anyone sees something glaringly wrong?

I also tried what Jansen mentioned, with no better success.


Your video had two techniques - referencing the external folder and then including all the files in Hype’s resource library.

The reason your first attempt did not work is that Hype cannot look at the filesystem and serve files relative to the .hype document during editing or a preview. Instead what you’d want to do is an export, and then move the “7910” folder next to the .html document. Then it would work.

The second case where the pano does show up in Hype also makes sense - the the 7910.html file path is in the .hyperesources folder and not next to the main .html file. It is a quirk that it works in the editor :slight_smile:. You can make it work in the preview by specifying “${resourcesFolderName}/7910.html” for the specified URL. This will be substituted with the .hyperesources folder during export. You may also need to select the images in the Resource Library and uncheck “Automatically optimize when exporting”.


Man, so close!

Thanks so much! :slight_smile: