使用Pano2VR实现客厅VR效果

内容简介

        本文分享如何使用Pano2VR来实现客厅VR效果，并有常见的进入动画和热点提示等。效果如下图（为了可以上传缩小屏幕，属于PC端运行）：

实现过程

        一、Pano2VR操作

        1、 运行Pano2VR软件后，类型选择“自动”，然后把上下左右前后六张图片拖进来，效果如图2；可使用鼠标拖动屏幕的图片进行旋转浏览效果；

        2、选择屏幕的“指定热点”图标，然后在图片需要添加热点的位置双击，效果如图2；可对热点的属性进行编辑，“标题”的内容就是移上去显示的文字信息；

        Tips：除了热点，软件还有其他可添加的信息，可在屏幕查看；

        3、点击“输出”下的“+”，选择“HTML5”后，右下角会出现一些相应的属性设置，如图2；勾选“自动选择&动画”下的“飞入”（这个就是打开时的动画），然后点击第2步的设置图标，就会导出生成的html5文件（文件在保存的源文件下）；

        Tips：“输出”不同类型都有很多不同的属性设置，可根据实际情况使用；

        二、修改代码

        1、 生成的HTML文件，架构如下：

        2、修改热点图标；在index.html增加红色框位置的代码，用来获取所有热点，并循环替换为本地的图标： 

        3、修改提示框的样式；由于上图代码已经给提示框增加“prop”的class，只需在index.html引入生成的styles.css，然后在styles.css增加修改提示框的样式代码。 

.prop {
  top: 30px !important;
  border: 1px solid #fcfcfc !important;
  border-radius: 3px !important;
  height: auto !important;
  padding: 10px !important;
}

        4、浏览index.html页面（需要部署），查看旋转和热点效果。