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

最新推荐文章于 2024-08-12 08:48:24 发布

ccessl

最新推荐文章于 2024-08-12 08:48:24 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/cc_fys/article/details/78490305

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

		
	};

}