photo-sphere-viewer.js使用时图片拉伸的问题

photo-sphere-viewer使用了three.js,其代码中下面这句话中，SphereGeometry是用来在三维空间内创建一个球体对象，图片会按球体拉伸。

     var geometry = new THREE.SphereGeometry(200, rings, segments);var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});var mesh = new THREE.Mesh(geometry, material);mesh.scale.x = -1;scene.add(mesh);

在使用photo-sphere-viewer时，在用这个插件显示全景图的时候，由于图片太长，天空部分和地面部分图片拉伸严重变形。在前端处理用canvas将图片上部和下部按比例补上了一部分灰色，显示全景图的时候天空和地面部分就补上了一部分。

HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>Photo Sphere Viewer</title><meta name="viewport" content="initial-scale=1.0" /><link rel="stylesheet" href="./example1.css" /><script src="../three.min.js"></script><script src="../photo-sphere-viewer.min.js"></script><script src="ex.js"></script></head><body><div id="content">      <div id="container"></div><p style="text-align: center;"><a href="#" id="go">show</a></p><div id="your-pano"></div><form method="get" action="example1.html"><p style="text-align: center;"><input type="file" name="pano" id="pano" /></p></form></div><div><canvas id="myImage" style="display:none" ></canvas><img id="myimg" style="display:none"/></div></body></html>

JS

window.onload = function() {document.getElementById('pano').addEventListener('change', upload, false);
};function upload() {var file = document.getElementById('pano').files[0];var canvas=document.getElementById('myImage');var image=document.getElementById('myimg');var ctx=canvas.getContext('2d');var width=canvas.width;var height=canvas.heigth;var reader = new FileReader();var result;reader.readAsDataURL(file);reader.onload = function() {var div = document.getElementById('your-pano');var PSV;image.src=reader.result;width=image.naturalWidth;height=image.naturalHeight;if(width/height>2){console.log('special condition');canvas.width=width;canvas.height=height+width/4;ctx.fillStyle='rgb(200,200,200)';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.drawImage(image,0,width/8);result=canvas.toDataURL("image/jpeg");PSV = new PhotoSphereViewer({panorama: result,container: div,time_anim: false,navbar: true,size: {width: '100%',height: '500px'},usexmpdata: false});}else{console.log('normal condition');result=reader.result;PSV = new PhotoSphereViewer({panorama: result,container: div,time_anim: false,navbar: true,size: {width: '100%',height: '500px'},usexmpdata: false});}};}

photo-sphere-viewer.js使用时图片拉伸的问题相关推荐

Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的该js插件可以360度旋转查看全景图,也可以上 ...
Photo Sphere Viewer渲染全景图片
下载官方网站: ---- https://photo-sphere-viewer.js.org 附属依赖必选项: ---- three.js ---- browser.js 注: 可以直接使用 np ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
开源全景插件 Photo Sphere Viewer
概述日常中,我们比较常见的是街区全景,百度通过街景车采集街景数据,最后形成全景应用,百度的全景还拥有一定的交互功能,可以随着街道移动街景,作为个人开发者,有一些开源库能够满足我们对全景的应用与探索. ...
kinslideshow使用时图片和a标签不能换行，否则。无法实现无缝滚动。
kinslideshow使用时图片和a标签不能换行,否则.无法实现无缝滚动. <#list list_images?chunk(colSize) as list_chunk><#li ...
解决RecyclerView瀑布流效果结合Glide使用时图片变形的问题
解决RecyclerView瀑布流效果结合Glide使用时图片变形的问题参考文章: (1)解决RecyclerView瀑布流效果结合Glide使用时图片变形的问题 (2)https://www.cn ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
html动态添加图片不显示不出来,解决 viewer.js 动态更新图片导致无法预览的问题...
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
Photo Sphere Viewer
Photo Sphere Viewer photo-sphere-viewer中文文档_陈坚泓的博客-CSDN博客_photo-sphere-viewer

photo-sphere-viewer.js使用时图片拉伸的问题

HTML

JS

photo-sphere-viewer.js使用时图片拉伸的问题相关推荐

最新文章

热门文章