Author: MastaMan
Date: October 24, 2022
Updated on: April 4, 2023

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.

                         2022 10 25   16.42.12
Loading...
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.

rendered panoramas
Loading...

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 Visualization

Panoramas were rendered using Corona Renderer 7 with the new Corona Camera, in the settings of which the Spherical 360 ° type is specified.

3dsmax corona renderer camera 360
Loading...

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/
github main page
Loading...

Press Sign Up, follow the instructions, there is nothing complicated here ...

github registration
Loading...

For all subsequent steps, click Continue and at the end be sure to Continue for free. Done!

github welcome screen
Loading...

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.

github create repository
Loading...

Installing GitHub Desktop

github empty repository
Loading...

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.

github desktop clone repository
Loading...

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.

github create readme in repository from web
Loading...

Then, simply click Commit file.

github commit file
Loading...

Go to the Settings section.

github repository settings
Loading...

Go to the Pages section and select Branch: main.

github setup pages
Loading...

Click Save.

save github pages
Loading...

Refresh the page after a minute, you should see something like the one below.

github appear notifcation with link
Loading...

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.

github pages hosted site
Loading...
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.

marzipano start
Loading...
marzipano upload files
Loading...

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.

marzipano change settings
Loading...

To create transitions between panoramas, click Link Hotspot, at the bottom right.

marziapno link hotspot
Loading...

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.

marzipano link hotspot 2
Loading...

Press the Set initial view button to set the camera to the default view. One view set up, move on. Click the transition icon.

marzipano icon go to pano
Loading...

Expand the camera and follow the same steps: set Set initial view, add Hotspots to other panoramas.

marzipano setup another panoramas
Loading...

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.

marzipano all setup has done
Loading...
marzipano export project
Loading...

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.

marzipano files in archive
Loading...

Extract all files from the app-files folder to a GitHub project on your computer. You should end up like this.

marzipano unzip files from app files folder
Loading...

Excellent! We open the program GitHub Desktop, we see the following.

git unstaged files
Loading...

Write the name Commit, then click Commit to main.

github create commit
Loading...

The file preparation process has started... Wait a couple of minutes and then click Push origin.

github push to origin
Loading...
https://360-pano-tour.github.io/SVOYA-360/

Excellent! The panorama is up and running!

github panorama commited and uploaded
Loading...

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 Marzipano

This 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.

marzipano black design files
Loading...

After replacing the files, create a Commit in GitHub Desktop.

commit new design marzipano files to github
Loading...

Then click Push origin. After a few minutes, refresh the panorama tour page.

push to origin new commits to github
Loading...

Here is the final result.

svoya final panorama tour 2
Loading...

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.

svoya final panorama tour 1
Loading...

I hope you liked the article, write comments or you succeeded ...



{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content