结合使用Photo Sphere Viewer和React

Question

我已经遵循了指南，但在这方面我还是个新手。我已经创建了一个基本的react.js应用程序，并安装了uevent、three和照片球体查看器作为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} />;
}

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} />;
};