将 Photo Sphere Viewer 与 React 一起使用答案

【问题标题】：Using Photo Sphere Viewer with React将 Photo Sphere Viewer 与 React 一起使用
【发布时间】：2020-05-29 13:23:33
【问题描述】：

我已按照指南进行操作，但我仍然是这方面的新手。我创建了一个基本的 react.js 应用程序并安装了 uevent、3 和 photo-sphere-viewer 作为guide requests。然后我用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

然后将app.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} />;
}

【问题讨论】：

标签： reactjs photosphere photosphereviewer

【解决方案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} />;
};

【讨论】：