How to make a virtual tour with VR virtual tour software - VRTourMaker
With VRTourMaker, you can create virtual tours that support VR mode very easy.
You can create virtual tours by using panoramic images and panoramic videos taken by 360 cameras (Insta360, Ricoh Theta, Teche, etc.) and generated by 360 panorama software.
Let's take VRTourMaker 1.5 as an example to briefly explain the basic operations of VRTourMaker.
Start VRTourMaker.
After it is installed, double-click the software icon to launch VRTourMaker.
Firstly, the software will open a window named start. You can create a new project or open a recent project.
In this example, click the button New Project.
After creating a new project, VRTourMaker will enter the Scenes Edit window.
You can click the button + to import the equirectangular panoramic images (We also call that 2:1 panoramic images). Also, you can use the mouse to drag panoramic images into the window.
There is a function to select several imported panoramas and right-click to "build a sister relationship". About that function, please visit "How to create sisterhood panorama?".
Double-click the panorama thumbnail to start editing the virtual tour.
Firstly, Open the Scene Settings page Under the Properties tab. On this page, you can set the scene properties.
Click the scene thumbnail in the scene list on the left side of the page to select the current scene that you want to set the properties for.
Drag the mouse on the player to set the pan and the tilt of the left of the current scene as the initial view angle. Scroll the mouse wheel on the player to set horizontal FOV of the current scene.
In the scene property panel on the right side of the page, you can set the name, introduction, background music, little planet effect and the view angle limits of the current scene.
Secondly, Open the Google Map page under the properties tab.
On this page, you can add the radar corresponding to the scene to Google map.
You can place the radar by dragging the thumbnail that is in the scene list on the left side of the page to the map.
To adjust the direction of the radar, you can rotate the radar by dragging the rotation mark on the top of the radar.
You can also adjust the direction of the scene corresponding to the radar direction by rotate the view of the player in the map properties panel.
For panoramic images taken with the equipment with GPS, you can automatically add radar to the scene location on the map by selecting "Automatically add radar for the scene with GPS", shown as the below:
Thirdly, Open the Planform page under the properties tab.
On this page, you can set the map for the scene groups and add the radar corresponding to the scene to the map.
After Opening Planform, you can click the group thumbnail or the scene thumbnail in the scene list to select the current group and import a planform file as the map of the group.
After importing the map, drag the scene thumbnail in the scene list to add the radar to the scene location on the map.
The direction can also be adjusted on both the radar and scene, which are the same as Google Map.
Once output, the radar in the planform will rotate following the rotation of the scene.The following is one of the display styles of the map. You can select another style in Skin Selection.
So far, you have set the properties of the scene. The following describes how to add the hotspots to the scenes, such as scene transfer hotspot, text hotspot, image/album hotspots, video hotspot, object model hotspot, PDF hotspot, link hotspot, street view hotspot, and so on.
Click the Hotspots tab to open hotspot edit page. On this page, you can add the hotspots and set the hotspot properties.
Click the scene thumbnail in the scene list on the left side of the page to select the current scene that you want to add the hotspots to.
Generally, we can click the hotspot icon to add a hotspot into the left of view of the player for the current scene and set the properties in the hotspot properties panel on the right side of the page.
The first button in the hotspot toolbar is Scene Transfer Hotspot.
After the hotspot is added, you can adjust the hotspot style, destination scene, hint text and view angle of the destination in the hotspot properties panel.
The default destination is the next scene of the current scene in the scene list. If the current scene is in the last one, the destinationg will be the first one in the scene list.
If you want to display the destination scene with the little planet effect, you can select the check box Display little planet effect when switching into the current scene.
When adding scene transfer hotspot that use icon drone or helicopter icon in the air, it often happens that the hotspot does not match the specified location.
In this case, you can add an Indicator line to hotspot.
If you select the check box "Show Indicator Line", the line will be added to the below of the hotspot.
Select the hotspot with an indicator line, both ends of the line will show blue dot, shown as the below:
You can drag the dots to adjust the location of the two ends of the line.
All type of the hotspots support the indicator line except image-paste and animation hotspot.
The second button in the hotspot toolbar is Image/Album Hotspot.
After the hotspot is added, you can set a group of the images for the hotspot. It will pop up the images to click the hotspot when playing the virtual tour.
VRTourMaker does not set a limit on the number of images. However, for a good experience, it's recommended to set ten or fewer images.
The third button is Text Hotspot.
After adding the hotspot, you can set a text as the description for it. And when the virtual tour is played, it will pop up a description window to click the hotspot.
If you don’t want to popup a window when the hotspot is clicked, you can just not select the check box Popup more info. And then, the hotspot will be just a mark there with icon and hint text.
Of course, if you just want to show the hint text, you can set the combo box Display mode to the value Display text only.
If you just want to show the icon, you can delete the hint text and set the
combo box Display mode to the value Display picture and text.
The fourth button is the Video Hotspot. The hotspot can popup not only the local video but also the online video.
At present, VRTourMaker only support the YouTube for the online video. You can paste the YouTube URL of the video page or the sharing code of the video into the specified input field. You can also link the 360 videos on YouTube.
If the video was posted by your company or another platform, paste the embed code into the field Embed Code. If the platform does not provide the embed code, you can input the following code into the field
Embed Code:
<iframe src='${Video_URL}' frameborder='0'>allowfullscreen='true'></iframe>
${Video_URL} is the video URL that you want popup.
If it's the local video, you can set the combo box about video source to the value Use Local Video. And then there will be a button Select a Video for Uploading under it. Click the button to open the file dialog and select a local image for the hotspot.
If you want to play the local video as a 360 video, you can select the check box
This is a 360 video. If you do not select it, the video will be played as a normal video.
The fifth button is "Object Model Hotspot".
This hotspot allows users to popup an object model.
The source file of the model is a series of photos of the object. Click the hotspot to popup a image window where you can use the mouse or your finger to drag the photo area, and then the photos will switch quickly that looks like a real 3D object. VRTourMaker does not support the real 3D object model. If you want to use that, for example, created by like 3DMax, you have to make a separate page that can play the 3D model file and upload them to the server in advance. And then use the link hotspot to open the model page.
The sixth button is Animation Hotspot.
Sometimes, there are something active, for example, the window or the door can open and close. We want to show their activities. We can use this hotspot. This hotspot needs the user to set a series of images to it. They are the images of the object activities at each moment. The hotspot maps the image to the panorama. And it allows the user to adjust the mapping appearance in order to make the images to be fit for the background. When playing the virtual tour, the user can use the mouse or the finger to drag the photo area, and then the photos will switch quickly that show the activities of the object. It let the virtual tour more vivid.
Click the button Animation Hotspot to add the hotspot into the left of view of the player. Set a series of the images at the hotspot properties panel. And then, the hotspot will load the first image and make it as the appearance.
You can adjust the shape and the size of the hotspot by dragging the handles at the four corners of the hotspot.
If you select Repeat the cycle when dragging, you can let it work as a 3D object model.
Please refer to "Embedding 3D object in a virtual tour in three ways" for details.
When playing the virtual tour, drag the hotspot with your mouse or finger to switch the images. That gives the impression that you can interact with thisobject.
The seventh button is Street View Hotspot.
Itis similar to other hotspots to set the style and hint text.
The URL that need be input for the street view must be the address in the code of Embed a map generated by Google. You cannot use the link that generated by Google or the link in the address bar.
For example, the below is the URL that is pasted into VRTourMaker:
https://www.google.com/maps/embed?pb=!4v1604021355206!6m8!1m7!1sCAoSLEFGMVFpcE5YdUFnbkxUNjNhbDF1VGdtVjMwSDY5Vkp6alNxM3NCTEhIeGpF!2m2!1d35.6801142!2d139.7685697!3f134.92984164377214!4f12.419454649921192!5f0.7820865974627469
It is the value of the attribute src (Shown as the below):
The eighth button is Link Hotspot.
This hotspot is easy to use. Just paste the URL of the webpage you want to pop up into the Webpage URL property of the hotspot properties panel.
Note: please copy the URL including https or http, shown as the below:
The ninth button is PDF Hotspot.
It supports both online and local.
If PDF file is local, you can select a local PDF file to the hotspot. If PDF file is online, you can just paste the URL of PDF file into the PDF URL property.
The tenth button is the Image-paste hotspot.
After the hotspot is added, it will be shown as a rectangular box in the player. After importing the series of images (the number is unlimited), the first photo will appear in the box.
You can adjust the shape and the size of the hotspot by dragging the handles at the four corners of the hotspot in order to make the hotspot to be fit for the scene image.
When playing the virtual tour, the image pasted in the hotspot will
automatically switch to the next image every 3 seconds, but if only one image is pasted, it will not switch.
It will pop up the images window to click the image.
You can switch the images by dragging the image in the window or clicking the arrow buttons on the left and right of the window. This is a little different from Image/Album Hotspot above.
Image/Album Hotspot is by clicking the hotspot icon to popup the images window.
And Image-paste hotspot is by clicking the image mapped to the scene to popup the image itself.
At the last button in the hotspot toolbar is Custom Hotspot.
This hotspot allows you to customize the content you want to embed in your virtual tour.
For example, if you want to embed an external 3D object, you can embed the webpage URL of the external 3D object.
If you want to pop up a window that shows the product description and the button with purchase link, you can just enter the HTML code in the Embed Code property.
In the following sample, the HTML code was embedded. When it is played, there will be a window popped up that I designed.
So far, all the hotspots related contents have been completed. From now on, we will introduce to the guide mode.
"Guide mode" is a new feature added to VRTourMaker from version 1.3.
With this function, you can define a path to guide customers to watch the virtual tour. A path consists of a series of key points. Every key point is a view of the scene in the player. The view includes three attributes: pan, tilt and FOV. In a path, key points are arranged in time order. There is a transition time between the two key points. When playing the virtual tour, the player will calculate the transition parameters between the two key points.
Click the Guide tab to open Guide edit page, and you will see a blue button named Add KeyPoint in the middle of the player. Click that button to add a key point into the key points list on the right side of the page. When adding a key point, VRTourMaker will record the scene, pan, tilt, FOV at that time to the properties of the key point. Between the two key points in the same scene, the default time is 5 seconds. Between the two key points in the different scenes, the default time is 1 second. You can adjust the time by yourself.
Please visit How to use the guide function for the details.
On the upper right corner of the key points list panel, there is a Preview button. Click the button to play the guide path in the current player. Click the button again to cancel the preview. To the right of the Preview button is the Guide Settings button. Click this button to show the Guide settings dialog. In this dialog, you can set some parameters about the behaviors when playing the guide.
By default, the first and second options are selected, shown as the below:
When playing the virtual tour, if you want to play the guide path, you can click the Guide toggle-button on the upper right corner of the player to start or stop the guide. This button Guide will be invisible if no key points have been added.
The main setting of virtual tour is completed. The next, we can check the contents and settings. Click the button Relationship Map to enter the relationship page. In this page, you can check the scenes list, hotspots in every scene, the properties of the hotspots and so on.
If something about hotspots is wrong, you can edit it in this page at once or click the link edit at the end of each line to enter the property edit page of the hotspot.
If there is no problem with the contents, you can go on to set the style of the virtual tour in the page Skin Selection. Firstly, you should select the navigation buttons that you want to show in the virtual tour. There are three modes: PC、Pad and smartphone. Because of the difference in function and resolution of each device, The type and number of buttons that can be displayed under each device are different. It will be shown to select the checkbox in front of the button name.
And next, you can set the Button Style, UI Layout, menu of the virtual tour according to the prompt of the interface.
After setting the skin, you can go on to set context menu, web page title, publishing path, background music and so on as well as some Misc. related to publishing in the page Publish Settings.
Easypano provides virtual tour hosting service. If you want to use the service, please select the check box Synchronize the Publish Data to EP-Sky, and sign in with your EP-Sky account. After publishing, VRTourMaker will upload the virtual tour under the account automatically.
After the upload is completed, there will be a popup window shown, where is a URL of the virtual tour on Easypano website. You can visit the virtual tour at once, and also copy the URL.
There are two things to note:
The first is about the check box Allow scenes rotate automatically in XXs after mouse drag.
The setting here is just the rotation state of the scene after dragging the player with the mouse or finger.
If you want to prevent the scene from rotating at the beginning, please select the check box Don’t rotate the scene initially in the page Scene Settings Under the Properties tab. The second is the combo box Initial Display Mode. In normal mode, the player automatically plays the first scene in the scene list. It can be interrupted any time by mouse pressing or finger touching.
In guide mode, the player plays the guide path at the beginning of the virtual tour. You cannot interrupt it, except clicking the button Guide at the upper right corner of the player.
You can select the mode that you want.
Check the virtual tour settings for the last time. If all of them is OK, you can click the button Preview on the right side of title bar of VRTourMaker to preview the whole virtual tour in the built-in browser of VRTourMaker. You can check whether it is the effect that you want. It should be noted that: the resolution of the scene image in preview mode is 4096 * 2048 that is not the original, and because of the limitation of the device, Gyro and VR Mode do not work in preview mode properly. And maybe the player is not so smooth in preview mode, but if you publish the virtual tour and view it in the external browser, it will work fine.
So far, we're all done with VRTourMaker. If you want to know more about What kind of virtual tour can be created by VRTourMaker, please visit the samples.
Download the "VRTourMaker sample project file" and open it from your VRTourMaker.
If you have any other questions, please contact support@easypnao.com.