React纯Javascript上的Photo Sphere Viewer [英] Photo Sphere Viewer on React pure Javascript
问题描述
我正在尝试在我的React Component上实现Photo Sphere Viewer，我已经使用Google Maps API做到了这一点，并且效果很好，但是我使用的是相同的技术，但没有结果.如果还有其他选择可以在React上实现360 Photo Viewer(已使用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);
}*
我想得到这样的东西.
当我尝试直接使用"import from"语法导入脚本(three.min.js，photo-sphere-viewer.min.js)时，出现未定义的错误"PhotoSphereViewer".
使用useEffect挂钩对16.8版进行反应:
import React, { useEffect } from 'react';
import PhotoSphereViewer from 'photo-sphere-viewer';
export default function Photo(props) {
const sphereElementRef = React.createRef();
const { src } = props;
useEffect(() => {
const shperePlayerInstance = PhotoSphereViewer({
container: sphereElementRef.current,
panorama: src,
... // other options
});
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, [src]); // will only be called when the src prop gets updated
return (
<div ref={sphereElementRef}/>
);
}
I am trying to implement Photo Sphere Viewer on my React Component, i already did it with Google Maps API and it worked fine, but i'm using the same technique, no results. If is there any other option to implement 360 Photo Viewer on React (Already used Pannellum, didn't like it, didn't worked) i'm open to suggestions.
https://photo-sphere-viewer.js.org/
i got the html code from: 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);
}*
i would like to get something like this.
When i try to import the scripts(three.min.js, photo-sphere-viewer.min.js), with the "import from " syntax, directly, i get an error "PhotoSphereViewer" undefined.
React 16.8 version with useEffect hook:
import React, { useEffect } from 'react';
import PhotoSphereViewer from 'photo-sphere-viewer';
export default function Photo(props) {
const sphereElementRef = React.createRef();
const { src } = props;
useEffect(() => {
const shperePlayerInstance = PhotoSphereViewer({
container: sphereElementRef.current,
panorama: src,
... // other options
});
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, [src]); // will only be called when the src prop gets updated
return (
<div ref={sphereElementRef}/>
);
}
这篇关于React纯Javascript上的Photo Sphere Viewer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
