Skip to content

How to use 360 images with Marzipano and Insta360

Download PDF

[mp_row]

[mp_span col=”12″]

Recently I wrote about about Insta 360 Nano with Marzipano – a great combination. In this article I’ll talk about HOW this was achieved. I used the Insta360 Nano camera for my still images. This is a great little piece of kit and I’ve been using it for the past few months. The Insta360 also comes with free software so that you can do some simple editing and exporting of the still and video files. All of the software and hardware details can be found at http://www.insta360.com/.

You will also need to access the Marzzipano site at http://www.marzipano.net/ and click on the Marzipano Tool. This is where we will build and export our 360 tour.

First thing I had to do was convert the insp image files from the camera to standard JPGs as Marzipano does not support the file type. I used the software provided by Insta360 called Insta360Studio. Simply add your images to the list and export on the right.

 

With the images now as JPGs, they’ll look a bit odd. This is ok as Marzipano will recognise them.

Navigate to http://www.marzipano.net/ and click on the top right button titled Marzipano Tool (or go straight to http://www.marzipano.net/tool/index.html). This is a web based tool that will easily help you create your 360 tours.

When it first opens, simply drag and drop your files into the open window

Your files will automatically upload and be presented to you in the order uploaded.

To add a Hotspot, simply select the image you want to use and click on Info Hotspot at the bottom. Enter in the details. You can click and change the location of the hotspot by dragging.

 

You can change the names of the images on the left by clicking on the pencil if the selected image. The names you add here are used when linking to a hotspot as you can see below.

Once you’ve made all the changes you want to make, click on the EXPORT button in the top right. Note that you can’t save a project. If you close your browser you need to start again! Exporting will create the HTML / JS and CSS files you need.

I then upload the files as they are to my server where I can then link to them in an iFrame (or direct). These will work on a local machine, but I discovered you need a local web server like AMPPS to run them. You need to run the files from the app_files folder, these are also the ones you upload.

The project does come with some built in webservers for macOS and Windows, but being a developer I use my local MAMP instance.

Below is the final project embedded using H5p iFrame Embedder or you can link directly here

[/mp_span]

[/mp_row]

Published in360 VideoAdult LearningeLearningeLearning Tools

Be First to Comment

Leave a Reply

Your email address will not be published.