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动画了。如下：

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

CSS

.gam{position: absolute; top: 0; left: 0;}
.mry{ width: 361px; height: 500px; background: url('../images/mry.png') no-repeat 0 0; -webkit-animation:mry steps(2) 1s infinite; }
@-webkit-keyframes mry{
0%{background-position: 0 0;}
100%{background-position: -722px 0;}
}

效果：

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

6.添加交互

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

7.一些建议

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

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

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

用pano2vr创建全景图相关推荐

使用pano2vr创建全景图
pano2vr下载地址:http://pan.baidu.com/s/1nvDIBSt 演示例子:http://by.qq.com/cp/a20161104fishgolden_wx/index.ht ...
Python图像拼接：创建全景图
Python图像拼接:创建全景图算法原理基础流程几何原理核心步骤(RANSAC算法) 源代码结果分析综述夜景(中华城) 室内(引桐楼) 多建筑(鹭江道周边) 单调场景(海滩) 复杂场景( ...
ptgui创建全景图设置_使用Microsoft图像合成编辑器创建高级全景图
ptgui创建全景图设置 Do you enjoy making panoramas with your pictures, but want more features than tools lik ...
使用Pano2VR实现全景图切换和平面图效果
内容简介本文在文章<使用Pano2VR实现背景音乐.放大/缩小.旋转.缩略图和直线/立体/鱼眼模式等>基础上,增加全景图切换和平面图效果:效果如下图(为了可以上传缩小屏幕,属于PC端运行 ...
利用Pano2VR +PS在全景图中补地以及添加图片
文章目录在Pano2VR导入全景图在Pano2VR通过补丁提取要修改的地方提取补地图片提取添加图片的图片在PS中给提取的两张图片进行相应的修改修改补地图片修改添加图片导入一张自己的素材 ...
android显示全景图片素材,【行业应用】360°全景-如何制作一个360度全景图
第一步:拍摄全景图原始素材由专业的摄影师使用专业相机.鱼眼镜头以及三脚架拍摄汽车.房间或者其他需要360全景展示的对象照片我们来看下备用的三张原始素材第二步:使用"PTGui Pro& ...
全景图拼接算法实现与改进
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达本文由知乎作者z.defying授权转载,不得擅自二次转载.原文链接:https://zhuanlan ...
如何将你拍摄的照片转换成全景图及六面体（PTGui）
在完成全景照片的拍摄之后,接下来,我们需要的是进行全景图的拼接. 全景图片分为两种类型 1.立方体全景图(6面体)制作全景时通常使用该种格式如下图 2.球形图(2:1的单张全景图片)2:1全景图宽高 ...
getprocaddress得到为0_拼接图像得到全景图
目录: 函数介绍图像拼接算法实现图像拼接算法改进 Image Stitching with OpenCV and Python - PyImageSearchwww.pyimagesearch. ...
360全景拼接 opencv_opencv实现的全景图种类与步骤
全景图概述每当一个平面图像映射到一个弯曲的表面就会发生图象投影,反之亦然,这中现象特别常见于全景摄影.例如地球的球面可以映射到一块平坦的纸张.由于在我们周围的整个视场的可以被认为是作为球体的表面(对 ...

用pano2vr创建全景图