Intro
In this article, you will learn how to make a 360° panorama-tour of your renders is completely free.
We will not have to pay for any service, hosting, domain or registration.
Also, there will be no ads in the interface or logos.
It will be possible to view the tour in a web browser, of course there will be adaptation for Desktop and Mobile.
As a hosting we will use GitHub - a super stable solution with Uptime 99.99%.
And to create a tour - the simplest online service Marzipano.
Click the link below to see the result you get.
https://360-pano-tour.github.io/SVOYA-360/Start
Before you start, you should have 360° prepared; panorama renders. For a good picture, you need spherical panoramas at least 8k in size, in JPG or PNG format.
As an example, I made panoramas of the SVOYA interior, by the way, the last lesson is devoted to interactive visualization in WebGL. This tutorial can be found at the link below.
SVOYA Interactive WebGL VisualizationPanoramas were rendered using Corona Renderer 7 with the new Corona Camera, in the settings of which the Spherical 360 ° type is specified.
Understanding GitHub
GitHub is a project and code version management system and social media platform built for developers. This allows you to work collaboratively with other people around the world, plan your projects and keep track of your work. In our case, this is an excellent free file hosting.
Registration
Let's first register on GitHub. If you already have a GitHub account, you can skip this step.
Let's go to the address.
https://github.com/Press Sign Up, follow the instructions, there is nothing complicated here ...
For all subsequent steps, click Continue and at the end be sure to Continue for free. Done!
On this page, we will immediately create a repository by clicking Create repository, enter a name, for example SVOYA-360 and be sure to turn on the switch to Public in order to any user had access to the repository.
Installing GitHub Desktop
ClickSet up in Desktop. If this is your first time doing this, you will be asked to download the GitHub Desktop Setup-x64.exe program. Download, install, log in...
Press Set up in Desktop again in the browser, now you should have a window with repository cloning.
Specify a convenient Local path, then click Clone.
This program is necessary for convenient uploading of files to the web. In theory, you can upload files through the GitHub web interface, but it is more convenient with the program, since there is no limit on the number of uploaded files.
Now we have made a link between your local project folder and GitHub. Later we will add panorama tour files to this folder and we will be able to conveniently upload them to the web.
Repository setup
And one more important nuance, you need to make some settings for your repository.
Press README to create the first file and initialize the creation of the main branch.
Then, simply click Commit file.
Go to the Settings section.
Go to the Pages section and select Branch: main.
Click Save.
Refresh the page after a minute, you should see something like the one below.
Click Visit Site, this will be the address of our panorama tour. There is nothing to display yet, but we already have free hosting and an Internet address.
Note!
As you can see, your name, specified during registration, is involved in the name. Therefore, for a prettier address, try to choose a more interesting name, such as the name of your company.
Creation of a panorama tour
Go to the address.
https://www.marzipano.net/tool/Press Start and upload your panoramas.
As you can see, the service interface is very simple. On the left are the important settings. Bottom right, buttons for creating a tour.
Sort your own Panorama List. Accordingly, the first panorama will be loaded at startup.
Note!
Marzipano has one interesting feature, all changes happen on the fly in the browser. You cannot save an intermediate option. Therefore, do not close the browser page until you are completely sure that the project is ready.
Let's make the project settings and change the Project Title at the top left. I leave all settings as default, except for Autorotate, which I always turn off.
To create transitions between panoramas, click Link Hotspot, at the bottom right.
Then select the required panorama from the list. Close the list and place the Hotspot on the screen. Immediately posting another Hotspot for the Kitchen Area.
Press the Set initial view button to set the camera to the default view. One view set up, move on. Click the transition icon.
Expand the camera and follow the same steps: set Set initial view, add Hotspots to other panoramas.
And so you need to set Hotspots for each panorama.
Recommendation!
Set the default view strictly horizontally straight, do not bend the camera corners up or down. You can enable Autorotate to make the camera look horizontal, then disable this option.
Once again, make sure you have placed all the Hotspots correctly with the transition icon. If everything works correctly, we export our project.
As a result, we get an archive with all the files for our own placement of the panorama on the Internet.
Publication 360° panorama of the tour on the Internet (GitHub)
Open the archive with an archiver. You will see the following file structure.
Extract all files from the app-files folder to a GitHub project on your computer. You should end up like this.
Excellent! We open the program GitHub Desktop, we see the following.
Write the name Commit, then click Commit to main.
The file preparation process has started... Wait a couple of minutes and then click Push origin.
Excellent! The panorama is up and running!
Bonus (Design)
The design seemed not modern to me and I decided to fix it. Download the archive from the link below.
Download Black design for MarzipanoThis is my design revision where I edited the original code. And now it's enough to extract the files from the archive and replace them in your project.
After replacing the files, create a Commit in GitHub Desktop.
Then click Push origin. After a few minutes, refresh the panorama tour page.
Here is the final result.
Conclusion
In my opinion, this way of providing panoramas is no worse than similar paid services. Most importantly, the panorama is available 24/7 with a stable connection, Marzipano's algorithms quickly display panoramas in the browser, since images are loaded only for a specific camera view. The interface is nice, minimalistic, without ads and logos. And with all that, we didn't spend a dime.
I hope you liked the article, write comments or you succeeded ...