React pure 上的 Photo Sphere 查看器 Javascript

Question

我正在尝试在我的 React 组件上实现 Photo Sphere Viewer，我已经使用 Google 地图 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>

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

我想要这样的东西。

当我尝试使用 "import from " 语法直接导入脚本（three.min.js、photo-sphere-viewer.min.js）时，出现错误 "PhotoSphereViewer"不明确的。

Answer 1

我遇到了类似的问题，我是这样解决的：

npm install --save photo-sphere-viewer

组件如下所示：

import React, { Component } from 'react'
import * as Sphere from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.min.css"


export default class SphereComponent extends Component {
    constructor(props) {
        super(props)
        this.divStyle = {
          width: '100%',
          height: '600px'
        };
        this.sphereDiv = element => {
            this.photoSphereViewer = element;
        };
        this.sphereDiv.appendChild = (elem) => {
            this.subDiv.appendChild(elem)
        }
    }

    componentDidMount() {
        const PVS = Sphere({
            parent: this,
            container: this.sphereDiv,
            panorama: "https://photo-sphere-viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg",
            navbar: [
                'autorotate',
                'zoom',
                'fullscreen'
            ]
        })
    }

    render() {
        return <div style={this.divStyle} ref={this.sphereDiv} id="viewer"><div ref={node => this.subDiv = node} style={this.divStyle}></div></div>
    }
}

就是这样。

Answer 2

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

React pure 上的 Photo Sphere 查看器 Javascript

Photo Sphere Viewer on React pure Javascript

javascript

html

reactjs

photosphere

photosphereviewer