目前有个插件叫krpano HTML5 Viewer可以实现全景展示,官网都是英文,而且网上资料也比较少些,需要看看官网实例、文档。
引用一下别人的博客:http://my.oschina.net/u/591525/blog/158572
Krpano功能介绍
Krpano viewer的主程序所使用的XML文件十分简洁.默认情况下仅可以做到场景的载入。其他所有功能,都以插件的
形式实现.而每个插件.既可以在自己的XML文件进行配置。 然后供主程序XML文件调用.也可以在主程序的XML文件
中直接[<plugin>标签引入并进行配置。这样做的好处就是功能明确,结构清晰,便于扩展,利于维护。
Krpano的所有标签如下:
代码解析:
1.<layer name="skin_topborder" url="vtourskin.png" crop="2|0|60|12" align="topleft" edge="bottomleft" width="100%" height="12" x="0" y="0" enabled="false" />
表示页面会生成一个div层,有宽高、位置布局属性。可以根据自己业务在界面进行布局,如果需要在图片上做点击事件需要加onclick属性如下:
<layer name="spot1" url="/Images/button_cancel.png" width="16" height="16" align="lefttop" edge="center" x="50" y="150"
zorder="2" οnclick="loadscene(scene_1, null, MERGE, BLEND(1));" />
loadscene是插件自带方法(载入指定的一个全景),只需要传一个全景<scene>标签的name即可。
2.执行脚本语句
<action name="skin_startup">
<!--设置图片列表-->
skin_addthumbs();
skin_onresize();
skin_updatescroll();
</action>
3.手机端用到陀螺仪和重力感应,需要插件gyro.js:
<plugin name="skin_gyro" keep="true" url="%SWFPATH%/plugins/gyro.js" enabled="false" camroll="true" friction="0" velastic="0" onavailable="set(layer[skin_btn_gyro].visible,true); skin_onresize();" />
4.html页面需要加入<meta>标签手机端需要适应屏幕:
<meta name="generator" content="Panotour Pro V2.0.1 64bits" />
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default">