html5全景图示例及解析(3d全景图、室内图、环视图)

用支持html5的浏览器打开，或者通过手机扫描以上二维码。

html5全景图相比传统FLASH有很多好处，比如在android\ios上的兼容性，比如微信的webapp应用等等。应该场景也很丰富，如房产类、专修类、汽车类、旅游类等应用。而最大的优势在于微信公众平台的兴起，html5全景图在手机webapp上的应用需求显然非常迫切。

在这之前主要接触到的是关于flash的全景图，如soso地图的街景等。大体的原理，是将前、后、左、右、上、下6个视角围绕成一个立方体空间，我们的观察点在这个空间的中心点。这6张图显然需要无缝的拼接在一起，如礼品包装盒一般。另外，就是通过图片的处理引擎，对视角进行修正。

这个HTML5全景图是通过一个工具自动生成的，具体的生成这里不多做描述，详见：http://bbs.pcbeta.com/viewthread-1065827-1-1.html

结构分析：

1、首先需要一张原图（baidu图片搜索全景图，可以得到一些素材）

2、通过工具图片后，会产生6张图

3、文件结构

images目录要存储以上切割后的图片

index.html 主页面

pano2vr_player.js 封装的播放器核心代码

thumb_out.xml,thumb_out2.xml 分别是两个全景图的配置

4、初始化

pano=new pano2vrPlayer("container");  pano.readConfigUrl("thumb_out.xml");

5、配置文件

详见：http://www.jslover.com/demo/pano/thumb_out.xml

主要是一些大小、角度等配置，以及图片资源的对应关系

6、标注与多个场景

本文只做最简单的DEMO演示，多场景通过pano2vr软件是可以实现的，大家有兴趣可以去研究下。

20150414备注：

很多朋友通过本BLOG，向我要DEMO源码，已上传，请下载 DEMO源码下载

20160426备注：

如果需要实现多个场景之间的链接切换，可以看下这篇文章：《使用pano2vr制作多场景热点切换的html5全景图应用》

如果给你带来帮助，欢迎微信或支付宝扫一扫，赞一下。