标题非常简单。最初，我想使用Panellum，
我可以做一个工作（下面的代码），但是太复杂了，无法在那里进行虚拟游览（带有按钮的东西可以将您移动到另一个地方）
另一方面，Marzipano具有出色的编辑工具，并且非常容易为像我这样的新手进行VR浏览。但是由于某种原因，我无法将其导入到我的wordpress网站中。
这正在工作Pannellum：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.pannellum.org/2.4/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.4/pannellum.js"></script>
<style>
#panorama {
width: 100%;
height: 60vh;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"title": "Funny its not working in here, but normally it works",
"autoLoad": true, // Default: false
// "preview": "https://pannellum.org/images/alma.jpg",
// "previewTitle": "Test Title",
// "previewAuthor": "Test Author",
// "autoRotate": 5,
// "autoRotateInactivityDelay": 3,
// "autoRotateStopDelay": 3,
// "compass": true, // Default: true
// "northOffset": 360,
// "showZoomCtrl": true, // Default: true
// "disableKeyboardCtrl": true, // Default: false
// "showFullscreenCtrl": false, // Default: true
// "showControls": false, // Default: true
// "keyboardZoom": false, // Default: true
// "draggable": false, // Default: true
// "yaw": 10, // Default: 0 -> left, right
// "pitch": 10, // Default: 0 -> up, down
// "minYaw": 50, // Default: -180
// "maxYaw": 100, // Default: 180
// "minPitch": -90, // Default: undefined
// "maxPitch": 90, // Default: undefined
// "minHfov": 10, // Default: 50
// "maxHfov": 100, // Default: 120
// hfov: 50, // Default: 100
// "fallback": "Cannot load this 360 image",
// "orientationOnByDefault": true, // Default: false
// "horizontalPitch": 100,
// "horizontalRoll": 100,
// "escapeHTML": true, // Default: false
// "animationTimingFunction": [0,1],
// "crossOrigin": "TESTING", // Default: anonumous
// "hotSpots": [],
// "hotSpotDebug": true, // Default: false
// "sceneFadeDuration": 2000,
"panorama": "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fanswers.unrealengine.com%2Fstorage%2Ftemp%2F81934-2d-vr.jpg&f=1"
// "https://pannellum.org/images/cerro-toco-0.jpg"
// "https://pannellum.org/images/jfk.jpg"
// "https://i.imgur.com/G7t9QD9.jpg"
// "https://pannellum.org/images/tocopilla.jpg"
// "https://pannellum.org/images/alma-correlator-facility.jpg"
// "https://pannellum.org/images/alma.jpg"
})
</script>
</body>
</html>
这是我的小杏仁饼：
（更改为xx.com）
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#pano {
width: 100%;
height: 60vh;
}
</style>
</head>
<body>
<div id="pano"></div>
<script type="text/javascript" src="https://xx.com/VR/es5-shim-master/es5-shim.js"></script>
<script type="text/javascript" src="https://xx.com/VR/EventShim-master/eventShim.js"></script>
<script type="text/javascript" src="https://xx.com/VR/request_animation_frame/rAF.js" ></script>
<script type="text/javascript" src="https://xx.com/VR/marzipano-0.8.0/marzipano.js"></script>
<script type="text/javascript">
//Flash//
var options = { swfPath: 'https://xx.com/VR/marzipano-0.8.0/marzipano.swf' };
var viewer = new Marzipano.Viewer(element, options);
</script>
<script type="text/javascript">
//Initializing - loading preview//
var panoElement = document.getElementById('pano');
var viewerOpts = {
controls: {
mouseViewMode: 'drag' // drag|qtvr
}
};
var viewer = new Marzipano.Viewer(panoElement, viewerOpts)
</script>
<script type="text/javascript">
//Scene//
var levels = [
{ tileSize: 256, size: 256, fallbackOnly: true },
{ tileSize: 512, size: 512 },
{ tileSize: 512: size: 1024 }
];
var geometry = new Marzipano.CubeGeometry(levels);
var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
cubeMapPreviewUrl: "https://xx.com/wp-content/uploads/2018/12/Chroma-1.jpg"
});
var initialView = {
yaw: 90 * Math.PI/180,
pitch: -30 * Math.PI/180,
fov: 90 * Math.PI/180
};
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);
var view = new Marzipano.RectilinearView(initialView, limiter);
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});
</script>
</body>
</html>
我要分别在<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#pano {
width: 100%;
height: 60vh;
}
</style>
</head>
<body>
<div id="pano"></div>
<script type="text/javascript" src="https://xx.com/VR/es5-shim-master/es5-shim.js"></script>
<script type="text/javascript" src="https://xx.com/VR/EventShim-master/eventShim.js"></script>
<script type="text/javascript" src="https://xx.com/VR/request_animation_frame/rAF.js" ></script>
<script type="text/javascript" src="https://xx.com/VR/marzipano-0.8.0/marzipano.js"></script>
<script type="text/javascript">
//Flash//
var options = { swfPath: 'https://xx.com/VR/marzipano-0.8.0/marzipano.swf' };
var viewer = new Marzipano.Viewer(element, options);
</script>
<script type="text/javascript">
//Initializing - loading preview//
var panoElement = document.getElementById('pano');
var viewerOpts = {
controls: {
mouseViewMode: 'drag' // drag|qtvr
}
};
var viewer = new Marzipano.Viewer(panoElement, viewerOpts)
</script>
<script type="text/javascript">
//Scene//
var levels = [
{ tileSize: 256, size: 256, fallbackOnly: true },
{ tileSize: 512, size: 512 },
{ tileSize: 512: size: 1024 }
];
var geometry = new Marzipano.CubeGeometry(levels);
var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
cubeMapPreviewUrl: "https://xx.com/wp-content/uploads/2018/12/Chroma-1.jpg"
});
var initialView = {
yaw: 90 * Math.PI/180,
pitch: -30 * Math.PI/180,
fov: 90 * Math.PI/180
};
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);
var view = new Marzipano.RectilinearView(initialView, limiter);
var scene = viewer.createScene({
source: source,
geometry: geometry,
view: view,
pinFirstLevel: true
});
</script>
</body>
</html>
中加载每个脚本，还有其他需要注意的地方吗？