1

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

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

1 回答 1

0

回答应该使用 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} />;
};
于 2020-06-06T17:03:06.253 回答