For an introduction to Marzipano refer to Tutorial: Marzipano Getting Started with Free 360 Image Viewer from Google
organize 360 images
I have 7 RICOH THETA images stored in the ./images folder off of my root project.
In index.js, set up a constant to hold the images.
// create array of filenames
const imageFileNames = [
"stanford.jpeg",
"carlsbad_1.jpg",
"carlsbad_2.jpg",
"room_5_5k.jpeg",
"palo_alto_office_11k.jpeg",
"honda-insight.jpeg",
"audi-car.jpeg"
];
index.html
add a div with id 'buttons`. Full HTML code below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Marz Switch</title>
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<div id="buttons"></div>
<p>Marzipano 360 image viewer demo</p>
<div id="pano"></div>
<script src="marzipano.js" ></script>
<script src="index.js"></script>
</body>
</html>
apply basic styling in style.css
#pano {
position: absolute;
width: 100%;
height: 85%;
}
#buttons {
padding: 5px;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 24px;
font-weight: bold;
color: grey;
border: none;
border-radius: 12px;
background-color: #FADA7A;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 20;
padding: 5px;
}
create a button for every image
Get the HTML element buttons.
For every button, run scene.switchTo() on the click event. The switchTo() method from Marzipano is what causes the image to change. The value of scene changes every time through the loop.
// Create Marzipano scenes and HTML buttons to hold each Marzipano scene
const buttons = document.getElementById("buttons");
for (let i = 0; i < imageFileNames.length; i++) {
// create an unique Marzipano scene for each image
let scene = viewer.createScene({
source: Marzipano.ImageUrlSource.fromString(
`images/${imageFileNames[i]}`
),
geometry: geometry,
view: view,
});
// create HTML button and switch scene when button is clicked
let buttonSwitchImage = document.createElement("button");
buttonSwitchImage.textContent = i + 1;
buttonSwitchImage.addEventListener('click', function() {
scene.switchTo();
})
buttons.appendChild(buttonSwitchImage);
// Display first scene.
if (i == 0) {scene.switchTo()}
}
index.js full listing
// Create viewer.
var viewer = new Marzipano.Viewer(document.getElementById('pano'));
// 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 array of filenames
const imageFileNames = [
"stanford.jpeg",
"carlsbad_1.jpg",
"carlsbad_2.jpg",
"room_5_5k.jpeg",
"palo_alto_office_11k.jpeg",
"honda-insight.jpeg",
"audi-car.jpeg"
];
// Create Marzipano scenes and HTML buttons to hold each Marzipano scene
const buttons = document.getElementById("buttons");
for (let i = 0; i < imageFileNames.length; i++) {
// create an unique Marzipano scene for each image
let scene = viewer.createScene({
source: Marzipano.ImageUrlSource.fromString(
`images/${imageFileNames[i]}`
),
geometry: geometry,
view: view,
});
// create HTML button and switch scene when button is clicked
let buttonSwitchImage = document.createElement("button");
buttonSwitchImage.textContent = i + 1;
buttonSwitchImage.addEventListener('click', function() {
scene.switchTo();
})
buttons.appendChild(buttonSwitchImage);
// Display first scene.
if (i == 0) {scene.switchTo()}
}
