npm install photo-sphere-viewer 引入6张合成图渲染问题

Question

问题出现的环境背景及自己尝试过哪些方法

npm install photo-sphere-viewer 

不能使用六张图的方式渲染 720 否则就像我下图一样不能完整呈现。
用原生js引入使用六张图的方式没问题。

    <script>
  var panos = [
    {
      url: {
        left: '../../mobile/left.jpg',
        front: '../../mobile/front.jpg',
        right: '../../mobile/right.jpg',
        back: '../../mobile/back.jpg',
        top: '../../mobile/top.jpg',
        bottom: '../../mobile/bottom.jpg'
      },
      desc: 'Sun Temple (Unreal 4)'
    },
    {
      url: {
        left: 'mobile1/left.jpg',
        front: 'mobile1/front.jpg',
        right: 'mobile1/right.jpg',
        back: 'mobile1/back.jpg',
        top: 'mobile1/top.jpg',
        bottom: 'mobile1/bottom.jpg'
      },
      desc: 'Test cubemap'
    }
  ];
        var div = document.getElementById('container');
        var PSV = new PhotoSphereViewer({
                panorama: panos[0].url,
                container: div,
                time_anim: 3000,
                navbar: true,
                navbar_style: {
                    backgroundColor: 'rgba(58, 67, 77, 0.7)'
                },
            });
    </script>

但是使用 panorama: test.jpg, 引入一张合并好的全景图就没问题。

相关代码 有问题显示的代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

import React from 'react'
import render from 'react-dom'
import left from '../../resource/imgs/pano/mobile/left.jpg'
import front from '../../resource/imgs/pano/mobile/front.jpg'
import right from '../../resource/imgs/pano/mobile/right.jpg'
import back from '../../resource/imgs/pano/mobile/back.jpg'
// import test from '../../resource/imgs/pano/mobile/test.jpg'
// import testa from '../../resource/imgs/pano/testa.png'
import top from '../../resource/imgs/pano/mobile/top.jpg'
import bottom from '../../resource/imgs/pano/mobile/bottom.jpg'
import PhotoSphereViewer from 'photo-sphere-viewer'
import '../../resource/less/photo-sphere-viewer.min.less'
// import '../../resource/css/home.less'
class panorama extends React.PureComponent {
    componentDidMount() {
        let pona = [{
                url:{
                    front: front,
                    right: right,
                    left: left,
                    back: back,
                    top: top,
                    bottom: bottom
                },
                desc:'1231231'
            }
        ];
        
        let viewer = document.getElementById("viewer");
        
        let PSV = new PhotoSphereViewer({
            container: viewer,
            time_anim: false,
            panorama: pona[0].url,
            default_fov: 180,
        })

    }
    render() {

        return (
            <>
            <section className='viewPanoramaIndex' >
                <div id="viewer"  style={{"width": "100%","height": "100vh"}}></div>
            </section>
            </>
        )
    }
}

export default panorama

你期待的结果是什么？实际看到的错误信息又是什么？\

Answer 1

您好，我用原生js引入使用六张图出现全黑屏，也没有报错，请问您说的“用原生js引入使用六张图的方式没问题”有没有什么指点呢？我按照官网的写法写的