大家好，欢迎来到IT知识分享网。

示例简介

本文分享如何使用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页面（需要部署），查看旋转和热点效果。