React 纯 Javascript 上的 Photo Sphere Viewer
Posted
技术标签:
【中文标题】React 纯 Javascript 上的 Photo Sphere Viewer【英文标题】：Photo Sphere Viewer on React pure Javascript 【发布时间】：2019-05-24 19:53:48 【问题描述】：我正在尝试在我的 React 组件上实现 Photo Sphere Viewer，我已经使用 Google Maps API 完成了它并且效果很好，但是我使用了相同的技术，没有结果。如果有任何其他选项可以在 React 上实现 360 照片查看器（已经使用 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”未定义。
【问题讨论】：
你使用 webpack 吗？如是。然后还请说明如何导入这些包。 是的，我用的是create-react-app，那些都是默认安装和导入的，对吧？ 【参考方案1】：带有useEffect钩子的React 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/>
);
【讨论】：
让我们再等几天看看评论吧：) 抱歉，Tiberiu 回复太晚了，感谢您的帮助！谢谢！！！它工作正常！ 嘿，没问题，您是否也接受它作为答案，因为它更新且更适合该问题？ 当然！你现在能看到吗？根据我的屏幕，它现在作为正确答案发布。【参考方案2】：我遇到了类似的问题，我就是这样解决的：
npm install --save photo-sphere-viewer
组件看起来像这样：
import React, Component from 'react'
import * as Sphere from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.min.css"
export default class SphereComponent extends Component
constructor(props)
super(props)
this.divStyle =
width: '100%',
height: '600px'
;
this.sphereDiv = element =>
this.photoSphereViewer = element;
;
this.sphereDiv.appendChild = (elem) =>
this.subDiv.appendChild(elem)
componentDidMount()
const PVS = Sphere(
parent: this,
container: this.sphereDiv,
panorama: "https://photo-sphere-viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg",
navbar: [
'autorotate',
'zoom',
'fullscreen'
]
)
render()
return <div style=this.divStyle ref=this.sphereDiv id="viewer"><div ref=node => this.subDiv = node style=this.divStyle></div></div>
就是这样。
【讨论】：
如何在componentWillUnmount中进行清理？ 您必须使用 this.photoSphereViewer（HTML 元素）作为容器，而不是 this.sphereDiv（Ref 回调）。您可以在 PVS 变量上调用“destroy”方法以在卸载时销毁查看器。也不支持“父母”选项。以上是关于React 纯 Javascript 上的 Photo Sphere Viewer的主要内容，如果未能解决你的问题，请参考以下文章
用于渐进式web和混合应用程序（纯JS、jQuery、Angular和React）的跨平台UI控件
使用纯javascript时如何禁用facebook中的“守卫”功能？
纯JavaScript入门级小游戏：兔子抢金币（附演示地址+源码）