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

	
		
		
		
		
		
		
		
	

	
		
		

			

			

				show
			

			


			

				

					
				
			
		
		

		
		
		
	

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

		
	};

}