求教，全景图PhotoSphereViewer插件使用问题

这是我写的一个简单代码
下面是呈现出来的网页画面
最后是文件目录
求教

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<meta charset="UTF-8">
<title>720CS</title>
<script src="./three.min.js"></script>
<script src="./photo-sphere-viewer.min.js"></script>
</script>
<script>
window.onload=function(){

var div = document.getElementById('container');

var PSV = new PhotoSphereViewer({
    // Path to the panorama
    /*panorama: '1.jpg',*/
    panorama: './1.jpg',

    // Container
    container: div });
}
</script>   </head>
<body >
下面
<div id="container"></div>
</body>
</html>
应该是js跨域问题。js打开本地图片属于跨域，打不开的，你把网页发布到本地再试试应该就行了
var psv = new PhotoSphereViewer({
panorama: 'sun.jpg',
container: div,
anim_speed:'200degrees',
size:{width: '100%', height:500}
});
给个size
把   js代码  放在html代码下面，  你的div都没生成你的js代码怎么能找到这个div尼~·     html页面是从上至下加载的以后js代码尽量放下面
panorama对应的图片值   需要进行BASE64转码   转成data:XXXXX的格式   不是图片地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title></title>
<script src="js/three.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="js/photo-sphere-viewer.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="container"> </div>
</body>
<script type="text/javascript"> createPanorama('http://localhost/1.jpg','#container',500); // 创建全景图function createPanorama(imgUrl,doc,imgHeight){
       var img=imgUrl;
       // var img = "http://qqmmsh.oss-cn-hangzhou.aliyuncs.com/apply/6113528861282912.jpg";
       // 图片地址转BASE64
       function getBase64Image(img) {
               var canvas = document.createElement("canvas");
               canvas.width = img.width;
               canvas.height = img.height;

               var ctx = canvas.getContext("2d");
               ctx.drawImage(img, 0, 0, img.width, img.height);
               var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
               var dataURL = canvas.toDataURL("image/"+ext);
               return dataURL;
       }
       // 初始化全景图核心代码段
       function initVR(doc,imgData){
               var renderDom=document.querySelector(doc);
               // var div = document.getElementById('your-pano');
               console.log(renderDom);
               var PSV = new PhotoSphereViewer({
                       // Panorama, given in base 64
                       panorama: imgData,
                       // Container
                       container: renderDom,
                       // Deactivate the animation
                       time_anim: false,
                       // Display the navigation bar
                       navbar: true,
                       // Resize the panorama
                       size: {
                               width: '100%',
                               height: imgHeight
                       },
                       time_anim:500
               });
       }       // 获取图片地址并转码
       var image = new Image();
       image.crossOrigin = '';
       image.src = img;
       image.onload = function(){
               var base64 = getBase64Image(image);
               console.log(base64);
               initVR(doc,base64);
       }
}
// window.onload = function() {
// var whb = document.getElementById('container')
// var PSV = new PhotoSphereViewer({
// // Path to the panorama
// //panorama: 'https://t1.huanqiucdn.cn/47c78d08c1341b06d3c4b9054a7c6101.jpg',
  //              // panorama: 'https://www.fangpeng.net/fpvr/textures/R0010002_20190807101921.JPG',
  //              panorama:'http://localhost/1.jpg',
// // Container
// container: whb, // // Deactivate the animation
// time_anim: false, // // Display the navigation bar
// navbar: true, // // Resize the panorama
// size: {
// width: '100px',
// height: '500px'
// }
// });
// }
</script>
</html>
注释的方法为何图片不出来  我本地服务器这样用就不夸域了  但是也不可以呢
three.js需要以http/https协议打开，本地文件看不了