需求

公司想要做一个VR效果的宣传H5页面。效果如图：

于是我找到了Pano2VR这款全景制作软件，需破解，不然有水印。所以来和大家分享下，多多指教。

实现

工具

【Pano2VR Pro 6.0.1破解版】

mac破解版下载：xclient.info/s/pano2vr-p…

window自行百度

如需二次开发，需要一定的前端功底

标注出来的图标基本就是比较常用的，下面就直接说了。

开始制作VR

1. 首先新建项目，会自动生成一个.p2vr后缀的文件，这个就是vr的文件。

2. 点击属性可以上传设计师给你的全景图片，理论上应该是一张长图，输入图像的类型设为自动，软件即可自动识别为十字形。

   

   

   看着像是会围成一个正方体。

3. 参数：

   

默认视图即初始现在的位置、大小、倾角，根据各自的需求设置即可。

飞入：如果输出设置了飞入，需要在这里设置相关参数

视场角/视场（缩放）：限制最大/最小 放大/缩放角度，各取所需即可

4. 输出： 目前我们说的是前端如何使用这个软件，所以选择输出类型为HTML5。 然后设置输出的一些参数：

输出文件夹：选择对应路径。

自动旋转&动画：如需自动旋转请选择对应选项；如需飞入效果，请选择对应选项；动画同上。

常见的输出配置就这两个比较有用，其它的我暂未用到。

5. 交互： 现有的交互图标及说明如下图：

具体展开说下绑定交互事件（其他的就是双击，然后选择对应资源即可）

    绑定事件：使用对应图标，在画布上双击即可绘制点击区域。绘制完成后，点击绘制区域，左侧会出现该Poly具体说明。我们只需关注两个字段：
    1. 目标
        应选择'_self',顾名思义。点击自身时生效。
    2. 链接目标网址。
        如果需跳转链接，填写链接。如果需要调用你的自定义函数，请填写javascript:say【函数名】();然后在导出的HTML5引入你的方法即可。

特别提醒:导出的源码绑定事件是使用 window.open('javascript:say【函数名】()')这种方法的，个别app或者pc端软件有不识别的情况。使用该代码块做兼容方案！

6. 二次开发 & show case

在导出的文件夹中找到index_1.html,可以去做你想做的一些业务逻辑（如点击事件或视图层展示些别的东西），使用js和css的绝对定位去实现。然后完成了所谓的VR全景。

总结

为什么要写这篇文章呢，因为我在使用这个软件的时候，发现找到的文章早已经是N年前的旧版本了，走了很多弯路，所以就想记录一下，和大家分享。我完成这个宣传页的时候，第一感受就是原来平时看的那些VR效果，实现的话，80%是软件生成的，还有20%是依赖强大的第三方类库，在此感谢前人。

另外，为什么我说是’伪‘VR呢？因为我觉得这本质就是3D效果。不知道我的想法是否正确。欢迎大家多多指教。