I'm trying to use Laravel and Marzipano to make my own virtual tour but I'm having trouble making the photos look on the page. The page goes blank and when I click, the mouse changes to the typical 360 photo motion cross. I have no idea where the problem is because it's the first time I've used it and I've never used anything like it. This is my code:
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Trial</title>
<script type="text/javascript" src="{{ url('js/marzipano/marzipano.js') }}"></script>
</head>
<body>
<div id="domID"></div>
<script type="text/javascript">
var panoElement = document.getElementById("domID");
var opts = {
controls: {
mouseViewMode: "drag"
}
}
var viewer = new Marzipano.Viewer(panoElement, opts);
var levels = [
{ tileSize: 512, size: 512 },
{ tileSize: 512, size: 1024 }
];
var geometry = new Marzipano.CubeGeometry(levels);
var source = Marzipano.ImageUrlSource.fromString("imgs/R0010598.JPG");
var view = new Marzipano.RectilinearView();
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view
});
scene.switchTo();
</script>
</body>
</html>
Thank you.
run this on LocalHost . try to have some time saving extensions on VS code like LiveServer . Go to Html page and click on GoLive on Bottom Right corner of your screen .Add marzipano.js in project and require it .