A Complete Guide on Creating and Hosting 360 Degree Tours with Marzipano

Interested in a demo?

Watch how we create 360° tours using Marzipano here:
https://youtu.be/CnMhm2XL8S0

And check out one of our demo tour sites here:
https://3d-tour.bantam.site
https://marzipano.bantam.site

Introduction to Marzipano

Marzipano is a powerful, free, and open-source tool designed to create immersive 360° virtual tours. Leveraging WebGL technology, it delivers high-performance, interactive experiences that function seamlessly across major desktop browsers and mobile devices. Whether you’re a real estate agent showcasing a property, a museum curator presenting an exhibit, or a photographer displaying a portfolio, Marzipano enables you to bring spaces to life online. For most users, no advanced coding skills are required, thanks to the intuitive Marzipano Tool, though developers can tap into its JavaScript API for deeper customization.

Why Choose Marzipano?

Marzipano stands out for its accessibility and versatility:

• Simple and Intuitive: The Marzipano Tool provides a no-code interface, allowing beginners to create virtual tours without a steep learning curve.
• High Performance: Built on WebGL, it ensures smooth rendering of 360° content, even on resource-constrained devices.
• Flexible: From basic tours to complex, interactive experiences, Marzipano adapts to various project needs, with options for customization via code.

Its lightweight nature—only 55KB when compressed—makes it easy to integrate into projects without taxing system resources. Since Google open-sourced Marzipano after acquiring Digisfera in 2015, it has become a valuable resource for the panoramic photography community.

Use Cases for Marzipano

Marzipano’s flexibility makes it a go-to solution for diverse industries and creative endeavors. Below are some key applications, though specific, well-documented examples are somewhat scarce due to its community-driven nature.

Real Estate

Virtual tours are a game-changer in real estate. Marzipano allows agents to create interactive walkthroughs of properties, enabling potential buyers to explore rooms, layouts, and features remotely. This immersive experience can enhance listings and attract serious inquiries.

Museums and Parks

Cultural institutions and national parks can use Marzipano to bring exhibits or landscapes online. Virtual tours provide global access to artifacts, artworks, or natural wonders, making them accessible to audiences who cannot visit in person. For instance, a museum could recreate a gallery space, allowing users to navigate between displays.

Photography and Design Portfolios

Photographers and designers can elevate their portfolios by presenting work in a 360° format. Marzipano transforms static images into interactive experiences, ideal for showcasing panoramic photography or immersive design projects. This approach can captivate clients and set portfolios apart.

Other Applications

Marzipano’s versatility extends to:

• Education: Teachers can create virtual field trips or interactive labs, as highlighted in a 2024 article on using Marzipano in classrooms (Eduverse).
• Virtual Events: Host immersive online events, such as conferences or art shows.
• Storytelling: Craft narrative-driven tours for storytelling or tourism.

While specific case studies are limited, Marzipano’s capabilities suggest broad potential across these domains.

How Marzipano Works

Marzipano transforms 360° panoramic images into interactive virtual tours through a straightforward process, supported by robust technology.

Core Functionality

• 360° Images: The foundation of any Marzipano tour is high-quality spherical or cubic panoramas, typically captured with 360° cameras.
• Hotspots and Transitions: Users can add clickable hotspots to link scenes, display information (e.g., text, images), or trigger actions. Smooth transitions between scenes enhance the user experience.
• Output: Marzipano exports tours as static HTML websites, comprising HTML, CSS, and JavaScript files, ready for hosting on any web server.

Technical Highlights

Marzipano is powered by WebGL, ensuring efficient rendering of 360° content. Its JavaScript API allows developers to customize functionality, such as adjusting viewer controls or integrating external data. The tool supports various image formats and resolutions, including multiresolution cubic images for high-detail tours. Despite its advanced capabilities, Marzipano remains lightweight, with a compressed size of approximately 55KB, making it suitable for a wide range of devices.

Step-by-Step Guide: How to Use Marzipano

Creating a virtual tour with Marzipano is accessible to both novices and developers. Below is a detailed guide to get started.

Getting Started

• No-Code Option: Visit the Marzipano Tool, a free, browser-based platform that requires no account. It processes panoramas locally, ensuring privacy as files are not uploaded to a server.

• Developer Option: For custom setups, download the source code from the Marzipano GitHub repository. Include the marzipano.js file in your project or install it via npm (npm install marzipano).

Uploading Images

• Image Requirements: Upload high-quality 360° images in JPG or PNG format, ideally at 8K resolution (e.g., 8000x4000 pixels) for optimal clarity.
• Formats: Choose between spherical (equirectangular) or cubic formats, depending on your camera’s output. Spherical images are common for most 360° cameras, while cubic formats suit high-resolution or multi-resolution setups.

Creating Hotspots and Transitions

• Hotspots: In the Marzipano Tool, add hotspots to link scenes or display information. For example, a hotspot in a living room could lead to a kitchen or show a description of furniture. Set hotspot positions (yaw and pitch) to align with the panorama.
• Initial Views: Define the starting view for each panorama (e.g., yaw, pitch, field of view) to guide users’ first impressions.
• Transitions: Configure smooth transitions between scenes to create a cohesive tour experience.

Previewing and Exporting

• Preview: Use the Marzipano Tool’s browser-based preview to test navigation, hotspots, and transitions. Adjust settings as needed.
• Export: Once satisfied, export the tour as a zip file containing HTML, CSS, and JavaScript files. The zip includes a README.txt with instructions for further customization.

How to Host Your Marzipano Virtual Tour

After creating your tour, hosting it online is the final step to share it with the world. Since Marzipano outputs a static website, choosing the right hosting platform is crucial for performance and accessibility.

Why Hosting Matters

A Marzipano tour, as a static website, requires a web server to deliver its HTML, CSS, and JavaScript files to users. A reliable host ensures fast load times, security, and scalability, enhancing the user experience and maintaining your tour’s professionalism.

Why Bantam.Host?

Bantam.Host is an excellent choice for hosting Marzipano projects, offering features tailored to static sites:

• Lightning Fast: Static sites load instantly, as they require no server-side processing or database calls, ensuring a smooth experience for visitors.
• Secure: With fewer vulnerabilities than dynamic sites, static hosting minimizes security risks. Bantam.Host also supports password protection for private tours.
• Simple: The platform’s drag-and-drop interface allows you to upload and deploy in seconds, with no complex server configuration.
• Free Tier: A free plan lets you test hosting without upfront costs, with options to upgrade for permanent projects or advanced features like custom domains.
• Additional Features: Bantam.Host provides visitor analytics, unlimited subdomains, and instant file updates, making it ideal for managing virtual tours.

Hosting Your Tour: Step-by-Step

• Export Your Project: After finalizing your tour in the Marzipano Tool, download it as a zip file containing an index.html and associated assets.

• Upload to Bantam.Host: Visit Bantam.Host, drag and drop your zip file into the upload area, or select it via the file browser. The platform automatically processes the zip as a static website.

• Choose a Domain: Select a free subdomain (e.g., yourproject.bantam.site) or connect a custom domain for a professional touch.
• Deploy: Click to deploy, and your tour is live, accessible globally within moments.

See It in Action

Explore a live example at marzipano.bantam.site, a Marzipano tour hosted on Bantam.Host. This demo illustrates the seamless performance and accessibility you can achieve with this hosting solution.

Advanced Tips and Customization

To elevate your Marzipano tour, consider these advanced techniques, which may require some technical knowledge:

• Customize the Look: Modify the exported CSS and JavaScript files to align the tour’s design with your brand. For example, adjust colors, fonts, or viewer controls to create a unique aesthetic.
• Add Interactivity: Enhance hotspots with rich content, such as embedded videos, images, or external links (e.g., YouTube or Google Maps). Use the JavaScript API to implement custom behaviors, like triggering actions on hotspot clicks.
• Boost SEO: Optimize your tour for search engines by using descriptive file names (e.g., living-room-panorama.jpg), adding metadata (e.g., title, description) to the HTML, and ensuring fast load times via Bantam.Host. Include alt text for images to improve accessibility.

For developers, the Marzipano documentation (Marzipano Docs) offers insights into advanced features, such as multi-resolution image support or device orientation controls.

Get Started Today

Marzipano is a versatile, free tool that empowers anyone to create captivating 360° virtual tours, from beginners using the no-code Marzipano Tool to developers leveraging its JavaScript API. Paired with Bantam.Host, which offers fast, secure, and user-friendly static site hosting, your tours can reach audiences worldwide with ease. Whether you’re showcasing a property, an exhibit, or a creative project, this combination delivers professional results.

Start building your virtual tour with Marzipano and host it on Bantam.Host today. Visit marzipano.bantam.site to see what’s possible and take the first step toward engaging your audience with immersive experiences.