Creating 360 photo tours for Meta Quest headsets with 3DVista

360 photographic tours can be very effective within VR headsets, especially if they are augmented with media and behaviors. This tutorial shows how to create headset-ready 360 tours using 3DVista Virtual Tour Pro.

3DVista Virtual Tour Pro

One or more 360 photos

Online web space for uploading your work

Using 3DVista Virtual Tour Pro (VTP for short) to build a 360 photo tour is straightforward, as is setting it up to work in Meta Quest headsets. For immersive headset viewing, add the appropriate VR button icon to the tour’s ‘skin’ – the graphics and buttons overlay that is visible in non-immersive environments – so viewers can trigger the VR browser to change to full immersive display. Then, when publishing the final deliverables ready for uploading to a web site, checking one box in the list of options will ensure the content is optimized for VR headsets.

There is more that can be done: adding video and graphic hotspots with VR-aware actions, allowing the tour to be downloaded to the headset for offline viewing, and so on. Some of these things are dependent on specific project requirements, but this tutorial will show a few tricks in addition to the basics of preparing a tour for headset delivery.

One difference with virtual tours viewed in headsets rather than on desktops is the lack of skin support. The skin is an interactive graphic overlay that is used for control buttons, branding, maps and so on, but at present this doesn’t appear in headsets; using the VR button and stepping into a fully immersive view will remove any skin elements from the experience. Because of this, enhancement plans should be based on adding hotspot elements.

Testing on a computer can be done using the software’s Preview function, but to see the tour in the Meta Quest headset it will need to be published, uploaded to a web site, and then visited in the Quest browser. Make sure you have access to FTP or equivalent file uploading options and some web-accessible online storage. Alternatively, the published tour can be copied to the headset’s internal storage and viewed using the 3DVista app; see Going Further below for details.

1. Import a 360 photo

Add your 360 image or images to a new project in VTP: choose File > New Project, click Select to accept the default ‘Basic/Empty/Without Color’ skin, then click Import Panorama and choose your 360 image. Standard Panorama is the format you’ll normally use here. We’ll use just one 360 image for now.

Click the Skin tab to enter the skin editor, then click the Icon Button image in the list just above the main viewer area. To find the right icon hover over each one to show its tooltip label. In the Skin Library panel that opens, pick VR from the list on the left, then choose a graphic that suits your scene. For example, if the image is very dark then avoid black graphics as your visitors will find those hard to spot. Remember too that anything here will be hidden when the viewer steps into the full immersive view.

You may prefer to use a graphic of your own for this. When you have the Skin Library panel open, click the Insert New Element button in the top-left, then browse for your custom image file. PNG is best as the format supports full transparency for custom graphic shapes. For basic efficiency keep the pixel dimensions small; no more than around 200px wide and tall and preferably closer to 100px.

Finally, click Select, click in the main viewer area to place the chosen button into the skin, then scale and drag it to where you want it to appear. This will show up as an overlay on top of your 360 image, fixed to that relative point in the window. It will also only be visible in browsers on devices that declare support for headset-style left/right eye views; Meta Quest headsets and regular mobile devices.

If you use a ready-made VR button this step isn’t needed as it is already set up correctly, but if you use your own graphic you will need to tell it what to do. With it selected, click the blue ‘+’ button in the Actions pane, select Media Control, then set the final (third) popup menu to ‘VR’ and click Done. When triggered in a suitable device this will take a visitor into immersive VR mode. Because this button does nothing in regular desktop browsers, go to the Properties pane, open the Advanced Options section, and check the ‘Show only if VR device available’ option.

Click the Publish button in the bottom-right of the VTP window. In the Publish window, make sure the large Web/Mobile tile has a green checkmark and the Optimize for Meta Quest 2 & Pico Neo 3 option is also checked. (This is also suitable for Quest Pro and other modern VR headsets.) If you want to allow visitors to download the tour to their headset’s browser for offline viewing, check the Display Download Message for Offline Playing option as well. Set a destination directory then click Publish.

You can test most things using the software’s built-in Preview feature, but testing the VR button behavior must be done on a headset or a regular mobile device otherwise the button won’t be visible. Upload everything that you just published to a folder in a web site, make a note of the address, then put on your Meta Quest headset and visit your tour in the Quest browser. Triggering the VR button will take you from the normal rectangular browser window to a fully immersed view of your 360 scene.

When there is more than one scene in a virtual tour, viewers will need a way to move from one to the next. There is more than one way to achieve this; the VR Menu is a one-click solution but it gives the viewer no sense of location as they move through the different scenes. Navigation hotspots take a little more time to add but the result is much more effective.

The simplest method is to enable the VR Menu feature; in VTP, select the Project tab, go to the VR Settings panel, and check the Show VR Menu box. This will show a translucent ‘Media’ box that lists the available scenes by name when triggered. It’s quick and easy but it’s not particularly elegant, especially if the scene names aren’t very explanatory.

To add navigation graphics to specific places within the scene so viewers know where they are heading, select the Panoramas tab and then the Hotspots tab below this. While viewing one of the panoramas, drag another one from the list into the place where the navigation graphic should be placed. Leave the ‘Create Return Hotspot’ option checked, click the grid, then pick a graphic to use for the navigation.

This will automatically add a hotspot to the destination scene as well. In the Create Return Hotspot panel that opens, drag the blue dot to where this should be in the scene. Now when a visitor sees the virtual tour they will be able to use the navigation graphics to move between scenes and build up a sense of where they are and where they are going in the virtual space.

Viewing the tour must be done using the headset’s browser. While it is possible to download and cache the tour (as mentioned in step 6, above) it can be more useful to copy the entire tour to the headset’s internal storage and access it from there. This requires the 3DVista app, available as an App Lab download from the Quest store. Make a folder called “3dvista” at the top level of the headset’s storage and copy the entire tour, inside its folder, into here. It will then appear within the 3DVista app, and it won’t need the VR button to be experienced as a fully immersive production.