网页上渲染全景图片

网页上渲染全景图片,足不出户带你赏风景看户外

引言

因为前面几篇文章都说明了three.js实现的web端的3维渲染,而且有相对应的demo。接下来将一个基于three.js的插件实现全景图片的渲染,Photo Sphere Viewer(基于three.js的web全景渲染插件) 带你足不出户赏风景。

下载

官方网站:
---- https://photo-sphere-viewer.js.org
附属依赖必选项:
---- three.js
---- browser.js
注: 可以直接使用 npm install photo-sphere-viewer或者yarn add photo-sphere-viewer安装,会自动下载three.js和browser.js

官网demo详解:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<!--所有基础依赖引入-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
<body>
<!--初始容器位置-->
<div id="viewer"></div>
<!--容器css设置,在网页中的大小等等设置-->
<style>
  #viewer {
    width: 100vw;
    height: 50vh;
  }
</style>
<!--最关键的一步,全景加载渲染的地方-->
<script>
  var viewer = new PhotoSphereViewer.Viewer({
   //需要渲染到的位置,上面div中定义的id,可以直接用 container: 'viewer'
    container: document.querySelector('#viewer'),
	//你的全景图片,可以直接是你自己手机拍的照片,但是记住这个文件要放在自己服务器,通过http或者https访问,不然会出现跨域问题
    panorama: 'https://photo-sphere-viewer.js.org/assets/Bryce-Canyon-National-Park-Mark-Doliner.jpg'
  });
</script>
</body>
</html>

好了,以上就可以实现一个简单的全景图片渲染demo了,你可以用手机拍自己周围,让别人足不出户访问你周围。

看看效果:
预览图1

自己动手实现

1.如果找不到下载依赖的地方,或者不想自己npm安装,可以直接将上面引入链接在浏览器打开,然后鼠标邮件另存为文件的名字,保存到本地,然后引入就可以。
2.准备图片,全景图片弄好后上传到随便可以用http访问的区域网或者公网,然后本地直接用链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全景图渲染</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="applicable-device" content="mobile">
	<!--下载到本地的基础依赖-->
    <link rel="stylesheet" href="./js/photo-sphere-viewer.min.css"/>
	<script src="./js/three.min.js"></script>
	<script src="./js/browser.min.js"></script>
	<script src="./js/photo-sphere-viewer.min.js"></script>
	<script src="./js/plugins/markers.js"></script>
<style>
<!--容器CSS-->
 #container {
    margin-top:10vh;
    width: 100vw;
    height: 70vh;
  }
</style>
</head>
<body>
<!--容器-->
    <div id="container"></div>
	<script >
		window.onload=function(){
			init();
		}
		//全景图参数配置函数
		function init(){
			var viewer = new PhotoSphereViewer.Viewer({
			//全景图位置
			container: 'container',
			//默认就是true
			navbar: true,
			//全景图自动开始旋转之前的空闲时间(毫秒)
			autorotateDelay: false,
			//旋转速度
			autorotateSpeed: '3rpm',
			//导航栏右边的提示问题
		    caption: '演示',
			defaultLat: 0.3,
			panorama: 'https://wangsr-oss-files.oss-cn-beijing.aliyuncs.com/images/%E5%85%A8%E6%99%AF/Bryce-Canyon-By-Jess-Beauchemin.jpg',
		    plugins: [
				PhotoSphereViewer.AutorotateKeypointsPlugin,
				PhotoSphereViewer.MarkersPlugin,
			  ],
		  });
		  //插件 点击则生成一个位置
		  var markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);
		  viewer.on('click', function(e, data) {
	      console.log(data)
		  if (!data.rightclick) {
			markersPlugin.addMarker({
			  id: '#' + Math.random(),
			  longitude: data.longitude,
			  latitude: data.latitude,
			  html: '&hearts;',
			  width: 40,
			  height: 40,
			  anchor: 'bottom center',
			  tooltip: '随机点',
			  data: {
				generated: true
			  }
			});
		  }
		}); 
		//双击取消生成的点
		markersPlugin.on('select-marker', function(e, marker, data) {
		  if (marker.data && marker.data.generated) {
			if (data.dblclick) {
			  markersPlugin.removeMarker(marker);
			} else if (data.rightclick) {
			  markersPlugin.updateMarker({
				id: marker.id,
				image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png',
			  });
			}
		  }
		})
		}
	</script>
</body>
</html>

好了,至此一个可以生成标记取消标记的demo完成了

预览图2

总结

如果单纯的用three.js实现这些可能就没这么容易了,前面几个文章讲了一些基本的three.js的基础知识,完成web端3D的或者全景图的渲染了,你需要考虑很多东西去实现,而Photo Sphere Viewer不一样,只需要简单的几步,就可以实现大部分需求,定制化的也可以由自己开发。