React 纯 Javascript 上的 Photo Sphere Viewer

Question

React 纯 Javascript 上的 Photo Sphere Viewer

Hug*_*ero 1 html javascript photosphere reactjs photosphereviewer

我正在尝试在我的 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>

Run Code Online (Sandbox Code Playgroud)

*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); 
  }*

Run Code Online (Sandbox Code Playgroud)

我想得到这样的东西。

当我尝试使用“import from”语法直接导入脚本（three.min.js、photo-sphere-viewer.min.js）时，我得到一个未定义的错误“PhotoSphereViewer”。

Answer 1

Tib*_*xim 5

带有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}/>
  );
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，6 月前
查看次数：	1796 次
最近记录：	4 年，10 月前