使用Pano2VR实现客厅VR效果

青旅半醒 2022-09-11 00:19 614阅读 0赞

### **内容简介** ###

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

![48f97b2f79c941f340c589ab0dd5ef7d.gif][]

### **实现过程** ###

**        一、Pano2VR操作**

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

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

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

**        二、修改代码**

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_18_color_FFFFFF_t_70_g_se_x_16][]

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

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页面（需要部署），查看旋转和热点效果。

![20210910094533828.jpg][]

[48f97b2f79c941f340c589ab0dd5ef7d.gif]: /images/20220829/9703e13ebb0146c4904c1f920ae90d32.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/745deb3d9ce84b2b938de97db2fcc61d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/bc07ab22d7c44dfd8b018b55fa3e01e2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/b2770e3bf020467e9824cff4b03347d9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/1c00475d4923453e9a1e6d3dfce7dc2a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/3a90fb6ea1464b1d90e7ac95b5277442.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/8aaa44c344cd4532a4e0c7ea616a82cc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/9aa9df88317e41248d85ee8c1ccde9bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAa2luZzA5NjQ_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220829/ba68b7264c2145feab23358241f74f8d.png
[20210910094533828.jpg]: /images/20220829/2f67c25c57bb45eeb7483d3f65aaeb0d.png