将 Photo Sphere Viewer 与 React 一起使用

Question

我已经遵循了指南，但我仍然是新手。我创建了一个基本的 react.js 应用程序，并按照指南的要求安装了 uevent、Three 和 photo-sphere-viewer。然后我使用Tiberiu Maxim的代码来显示360全景视图。

我收到此错误。

TypeError: photo_sphere_viewer__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function
(anonymous function)
src/App.js:9
6 | const { src } = props;
7 | 
8 | useEffect(() => {
>  9 |   const shperePlayerInstance = PhotoSphereViewer({
| ^  10 |     container: sphereElementRef.current,
11 |     panorama:
12 |       "https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",

要重新创建它，请运行此

npx create-react-app my-app
cd my-app
npm install three
npm install uevent
npm install photo-sphere-viewer

然后覆盖应用程序.js

import React, { useEffect } from "react";
import PhotoSphereViewer from "photo-sphere-viewer";
export default function App(props) {
const sphereElementRef = React.createRef();
const { src } = props;
useEffect(() => {
const shperePlayerInstance = PhotoSphereViewer({
container: sphereElementRef.current,
panorama:
"https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
});
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, [src]); // will only be called when the src prop gets updated
return <div ref={sphereElementRef} />;
}

Answer 1

答案 应该使用PhotoSphereViewer.viewer并在它前面添加新的

import React, { useEffect } from "react";
import { Viewer } from "photo-sphere-viewer";
export default () => {
const sphereElementRef = React.createRef();
useEffect(() => {
const shperePlayerInstance = new Viewer({
container: sphereElementRef.current,
panorama:
"https://upload.wikimedia.org/wikipedia/commons/f/f0/Colonia_Ulpia_Traiana_-_Rekonstruktion_r%C3%B6mischer_Schiffe-0010560.jpg",
});
// unmount component instructions
return () => {
shperePlayerInstance.destroy();
};
}, []); // will only be called when the src prop gets updated
return <div ref={sphereElementRef} />;
};