Я пытаюсь реализовать Photo Sphere Viewer на моем React Component, я уже сделал это с помощью Google Maps API, и он работал нормально, но я использую ту же технику, но безрезультатно. Если есть какой-либо другой вариант для реализации 360 Photo Viewer на React (уже использовал Pannellum, не понравилось, не сработало), я открыт для предложений.
https://photo -sphere-viewer.js.org /
я получил HTML-код от: https://github.com/JeremyHeleine/Photo-Sphere-Viewer/blob/master/examples/example.html
<head>
<meta charset="utf-8" />
<title>Photo Sphere Viewer</title>
<meta name="viewport" content="initial-scale=1.0" />
<script src="./three.min.js"></script>
<script src="./photo-sphere-viewer.min.js"></script>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
panorama: 'http://tassedecafe.org/wp-content/uploads/2013/01/parc-saint-pierre-amiens.jpg',
container: div,
time_anim: 3000,
navbar: true,
navbar_style: {
backgroundColor: 'rgba(58, 67, 77, 0.7)'
},
});
</script>
</body>
*import React from 'react';
import '../../index.css';
class ShperePanel extends React.Component{
componentDidMount() {
this.renderSphere();
}
renderSphere = () => {
loadScript('photo-sphere-viewer.min.js');
loadScript('three.min.js');
window.initSphere = this.initSphere;
}
initSphere = () => {
const PVS = new window.PhotoSphereViewer({
container: document.getElementByid('viewer'),
panorama: 'http://tassedecafe.org/wp-content/uploads/2013/01/parc-saint-pierre-amiens.jpg',
time_anim: 3000,
navbar: true,
navbar_style: {
backgroundColor: 'rgba(58, 67, 77, 0.7)'
}
})
}
render(){
return(
<div id="viewer"> </div>
);
}
}
export default ShperePanel
function loadScript(url) {
var index = window.document.getElementsByTagName('script')[0];
var script = window.document.createElement('script');
script.src = url;
script.async = true;
script.defer = true;
index.parentNode.insertBefore(script, index);
}*
Я бы хотел получить что-то подобное.
Когда я пытаюсь импортировать сценарии (three.min.js, photo -phere-viewer.min.js), с синтаксисом «import from» напрямую, я получаю ошибку «PhotoSphereViewer», не определенную.