Marzipano is a free 360 image viewer from Google. It is known best for the online Marzipano tool that is used in making virtual tours.
Marzipano also works great as a standalone 360 image viewer.
Getting marzipano.js
The GitHub repo or releases do not contain the compiled marzipano.js file. Here is the compiled library, version v0.10.2.
Place the marzipano.js file in the root of your project.
Alternatively, there is a npm package for marzipano. You can use a package manager such as npm or yarn for more complex projects. To get this example simple, we’re just using the js file in the root of the project.
index.html with div “pano”
In the html file, set up a div with the id of pano. We’ll use this ID to get the viewer into the HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="pano"></div>
<script src="marzipano.js" ></script>
<script src="index.js"></script>
</body>
</html>
style.css
Set the size of the viewer to cover the full width and height of the browser.
#pano {
position: absolute;
width: 100%;
height: 100%;
}
index.js
This is where most of the Marzipano configuration takes place.
// Create viewer.
var viewer = new Marzipano.Viewer(document.getElementById('pano'));
// Create source.
var source = Marzipano.ImageUrlSource.fromString(
"https://theta-image-api.s3.amazonaws.com/theta_images/R0010217.JPG"
);
// Create geometry.
var geometry = new Marzipano.EquirectGeometry([{ width: 4000 }]);
// Create view.
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);
// Create scene.
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
});
// Display scene.
scene.switchTo();
serve up code
There are many ways to start a small web server locally. I used Python.
python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
Then, open a web browser at http://localhost:8000
Live Site and Full Code Repo
Using Local 360 Images
I have some RICOH THETA images in the images folder.
In index.js, change the URL to a local file.
// Create source.
var source = Marzipano.ImageUrlSource.fromString(
"images/room_5_5k.jpeg"
);
Other Viewers
See 5 Free 360° Image Viewers for JavaScript Web and Mobile by @shegz101
