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

a962443153 2016-11-08 03:52:35
这是我写的一个简单代码


下面是呈现出来的网页画面


最后是文件目录


求教
...全文
1541 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
dragoo1 2019-08-14
  • 打赏
  • 举报
回复
three.js需要以http/https协议打开,本地文件看不了
qq_32278153 2019-08-14
  • 打赏
  • 举报
回复
<!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>


注释的方法 为何图片 不出来 我本地服务器 这样用 就不夸域了 但是 也不可以呢
  • 打赏
  • 举报
回复
panorama对应的图片值 需要进行BASE64转码 转成data:XXXXX的格式 不是图片地址
wen_z_j 2018-05-21
  • 打赏
  • 举报
回复
把 js代码 放在html代码下面, 你的div都没生成你的js代码怎么能找到这个div尼~· html页面是从上至下加载的 以后js代码尽量放下面
dakache11 2017-11-22
  • 打赏
  • 举报
回复
在移动端这个页面可以打开,,因为我再全景图底部加个按钮可以显示,就是图片加载不出来,只显示黑色的背景
dakache11 2017-11-22
  • 打赏
  • 举报
回复
有人回答么,,碰到了同样的问题
qq_36423228 2017-09-08
  • 打赏
  • 举报
回复
请问你解决了么?我遇到的问题和你一样
melody_zhong 2017-05-16
  • 打赏
  • 举报
回复
var psv = new PhotoSphereViewer({ panorama: 'sun.jpg', container: div, anim_speed:'200degrees', size:{width: '100%', height:500} }); 给个size
南无三 2017-05-07
  • 打赏
  • 举报
回复
应该是js跨域问题。js打开本地图片属于跨域,打不开的,你把网页发布到本地再试试应该就行了
a962443153 2016-11-08
  • 打赏
  • 举报
回复
补充一下问题,, 全景图一直加载不上。。。
a962443153 2016-11-08
  • 打赏
  • 举报
回复
<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>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧