Pano2VR进阶

冰箱开关门效果

知识点：

• 前期拍摄：拍摄机位固定不变的情况下，拍摄冰箱门的关闭状态和打开状态，后期合成两张全景图。

• 补丁：补丁可用于用图片覆盖全景图中不需要的区域，甚至可以向全景图中添加文本或图形。

• 列表视图：使用列表视图来查找查看器中的元素、更改元素顺序和复制热点等。

• 添加自定义图片元素: 在皮肤编辑器中，为交互热点模板添加自定义图片，和查看器中的补丁图片挂钩，实现交互控制。

教学开始：

效果说明：访问全景动画的时候，点击场景中的冰箱区域的按钮，可开启冰箱门，再次点击可关闭冰箱。效果如下：

实现步骤：

1. 在相同机位拍摄冰箱的开门和关门两种状态，后期合成两张全景图。（全景图由六维方全景提供，文章最后提供下载，）如下图所示：
   

2. 在Pano2VR中，打开合成后的两张全景图，并创建一个web输出，并点击编辑皮肤图标，新建一个皮肤，并保存到和项目工程一个目录里，命名为 skin.ggsk。

3. 在导览浏览器中，点击选择第二张全景图， 在查看器中，选择补丁工具，并在打开的冰箱门中间双击鼠标，创建补丁，并调整补丁的位置和大小，将开启的冰箱门全部覆盖。如下图所示：
   

4. 在补丁属性面板中，可对位置参数进行调整（数值不必全部一样），将图片格式设置为png，并点击提取按钮，提取图片。如下图所示：
   

5. 提取的补丁图片会自动存储到项目工程目录中的patches文件夹中，在 Photoshop 中打开提取的图片，并将图片的边缘处进行透明虚化处理，然后保存。效果如下图所示：
   

• 说明：
  将补丁图片进行边缘透明虚化处理，可以让图片更好的融入全景图中。

6. 回到Pano2VR中，在查看器中，选择刚添加的补丁图标，在补丁属性面板中，点击转换为交互热点图标，在弹出的转换补丁窗口中确认转换为热点。如下图所示：
   

7. 在列表视图面板中，在热点上单击右键，选择复制。如下图所示：
   

8. 在导览浏览器中，点击选择第一张全景图，在列表视图中，在热点区域单击右键，选择粘贴，将刚复制的热点拷贝到第一张全景图中。如下图所示：
   

9. 点击选择该热点，在热点属性面板中，为该热点添加皮肤 ID，名称为ht_patche，（可以根据习惯进行命名，需要和皮肤中的交互热点模板名称统一）。如下图所示：
   

10. 在查看器中，选择指定热点图标，在全景图冰箱门处双击鼠标，添加一个新的热点，并在热点属性面板中添加皮肤 ID ，名称为ht_open_close。如下图所示：
    

11. 在列表视图面板中，调整两个热点的顺序，将 Point02 拖动到 Point01 的上边。如下图所示：
    

12. 进入皮肤编辑器，新建变量，名称为vis_patche，类型为条件判断，默认值为假。如下图所示：
    

13. 新建一个交互热点模板，在属性面板中的位置卷展栏下， ID 命名为ht_open_close。如下图所示：
    

• 说明：
  此热点模板控制冰箱门的打开和关闭，所以可以添加一个图片作为交互按钮。如下图所示：
  

14. 在属性面板中，为ht_open_close热点添加一个动作。如下图所示：
    

• 说明：
  鼠标点击该热点，对变量vis_patche进行取反操作，即真变为假，假变为真。

15. 新建一个交互热点模板，在属性面板中的位置卷展栏下， ID 命名为ht_patche。如下图所示：
    

16. 在属性面板中，外观卷展栏下，取消可见性，并添加一个逻辑块。如下图所示：
    

• 可见逻辑块：变量vis_patche为真时，该热点可见。如下图所示：
  

17. 在属性面板中，热点模板卷展栏下，点击添加自定义图片元素按钮。如下图所示：
    
    添加后的效果，如下图所示：
    

18. 选择 ht_patche_CustomImage 外部图片元素，在属性面板中，高级卷展栏下，勾选可穿透。如下图所示：
    

19. 保存皮肤，并关闭皮肤编辑器，在导览浏览器中，删除第二张全景图，并输出全景动画即可。

• 备注：

  手形图标的动画效果，请参考《制作动画按钮》的教学。

• 冰箱全景图.7z