用pano2vr创建全景图

pano2vr下载地址：http://pan.baidu.com/s/1nvDIBSt

演示例子：http://by.qq.com/cp/a20161104fishgolden_wx/index.html（请调成模拟器下运行）

 

使用教程

 

1.把全景图拖到改区域

 

 

 

2.设定一些参数

 

选择html5后，点击旁边的增加按钮

 

立方体和图像质量的值越大，生成的图片越清晰。（立方体面积尺寸最大是2880）

按上图操作

 

打上勾。意思是全屏展示 和 开启陀螺仪，最后点击确定按钮则会弹出一个框 ：

 

点击是,然后选择输出目录则会开始生成文件。

也可以手动点击按钮生成文件

 

 

3.修改默认的显示界面

程序一开始的界面会显示这一个画面

 

可以在如下界面中修改初始画面

 

 

右边的界面是可以拖动的，拖动到想显示的界面即可。另外可以滚动鼠标，设置全景图的fov（修改后要重新生成文件）

 

4.设置可移动的范围

 

有时我们想让全景图移动的时候，移动到某个范围就不能在移动了，这时可以设置限制标记。

（修改后要重新生成文件）

 

5.添加精灵到场景

1）准备1张精灵图的gif图，如下 ：

2）点击

 

把gif图丢入到绿框中，操作鼠标可以修改图片的大小和位置。如 ：

然后重新生成文件

3）重新运行程序，然后右键-审查元素。可以看到，这里插入了一张名为mry.gif的图片。

但是这不是我们想要的效果，因为gif图在移动端浏览器多数不支持。所以我们需要接着往下修改。

 

4）修改源码

为了可以使用css3动画，这里需要修改下源码。打开pano2vr_player.js（需要格式化下代码）找到237行

修改为

 

Lcf_idx是我定义的一个全局变量，目的是给精灵起不同的类名

 

再次运行程序

 

之前的img标签就会变成div标签了，并且类名是ggmedia1。这样的话我们只要往这个div插入一个新的标签并且给上css3样式就可以使用css3动画了。如下 ：

JS

 

1. $(function(){

2. $('#container .ggmedia1').append('<div class="gam mry"></div>');

3. });

 

CSS

 

1. .gam{position: absolute; top: 0; left: 0;}

2. .mry{ width: 361px; height: 500px; background: url('../images/mry.png') no-repeat 0 0; -webkit-animation:mry steps(2) 1s infinite; }

3. @-webkit-keyframes mry{

4. 0%{background-position: 0 0;}

5. 100%{background-position: -722px 0;}

6. }

 

效果 ：

之前的img标签因为已经变成了div标签，所以src后面的gif图已经无效，然后我们以脚本的方式插入div，并且给了它一个类名为mry，并且给它ccs样式和动画。

 

6.添加交互

 

 

选择红色箭头的热点类型，然后把全景图移动到我们添加的gif图的位置（位置大概估计一下），然后双击鼠标左键添加点击区域，单击鼠标右键完成。然后url写点击后要执行的事件。Show()函数是我自定义的一个函数名。目标选择_self即可。

 

7.一些建议

1）程序刚开始运行的时候，会有一个灰色的矩形在左上角，如图 ：

 

解决的方法是添加一句样式 ：#container canvas{width: 100%; height: 100%;}

 

2）制作全景图的时候如果需要添加动态图，建议先把图片做成gif图，然后可以直接在pc端上看到效果。位置和大小调整好后，在执行第五步：添加精灵到场景