导出 VR

Pano2VR 项目可以通过 WebXR 或 VRTourviewer 在头戴式显示器或 VR 头显中查看。

支持 VR 中的皮肤,但是,并非所有皮肤功能都受支持。除 PDF、URL 和 YouTube/Vimeo 热点外,所有点热点均受支持。如果不使用 VR 皮肤,游览节点热点将显示为旋转的 3D 地球仪,但可以使用自定义热点图像进行更改。

在 Web 输出设置(Web Output Settings) 的 VR 面板中添加 VR 皮肤 。请参阅以下说明。Pano2VR 附带 2 款免费使用的 VR 皮肤。

对于白标和离线应用程序创建,我们建议使用 VR Tourviewer。或者,您可以使用包查看器应用程序进行脱机 WebXR 查看。

要进入 VR,您需要一个按钮 。所有内置皮肤都有一个进入 VR 按钮,该按钮将以沉浸式模式出现。

★ 项目必须托管在安全服务器 (HTTPS/SSL) 上才能使用查看所需的设备陀螺仪。

★ 移动电话需要获得许可才能使用陀螺仪和加速度计。首次启动时,您应该有机会授予权限。如果陀螺仪不工作,并且您使用的是安全服务器,请尝试清除网站数据。在 iPhone 上,前往“设置”>“Safari”>清除历史记录和网站数据。

支持什么

除以下类型外,支持点热点:

  • 网址
  • PDF 格式
  • 视频> YouTube
  • 视频> Vimeo

VR 中不支持固定元素:

  • Web 元素
  • 镜头光晕

支持皮肤,但不是所有皮肤功能。VR 不支持以下皮肤元素:

  • 视频> YouTube
  • 视频> Vimeo
  • 地图
  • PDF 格式
  • 滚动区域
  • 搜索栏
  • Lottie

VR 不支持的皮肤功能:

  • 自定义 CSS 位置和大小以及 CSS 属性(类、样式、内部元素)

  • 元素中的遮罩

★ 提示  ★ 如果您的 VR 弹出热点彼此靠近,它们可能会重叠,导致它们渗出。为避免这种情况,请将 z-index 1 应用于弹出元素。

使用内置 VR 皮肤

  1. 创建项目。
  2. 添加 Web 输出
  3. 添加包含 Enter VR 按钮的皮肤。所有内置皮肤都包含一个。如果您需要简单地使用“进入 VR”按钮更新皮肤,请阅读下面的说明
  4. 在 Web 输出属性中,找到 VR 窗格。选择 “已启用”
  5. 选择一个内置皮肤(feather_vr.ggskvenis_vr.ggsk)。
  6. [可选]在沉浸式视图中,向上查看时会出现一个按钮。单击它将隐藏或显示皮肤。取消选择 Web 输出属性(Web Output Properties) 中的 浮动蒙皮菜单(Floating Skin Menu Button) 以隐藏此按钮。此按钮也可以自定义
  7. 生成输出。(您可能需要先保存项目。

输出适用于 Meta Quest 和其他带有支持 WebXR 的浏览器的耳机。

使用 Enter VR 更新皮肤

必须在主皮肤上添加一个按钮才能进入项目的沉浸式模式。

  1. 打开皮肤。

  2. 添加一个图形元素(图像、文本、矩形、Lottie、SVG 等),该元素将成为“ 进入 VR”按钮。

    ★ 提示: 或者,从内置皮肤创建组件,然后将该组件添加到皮肤中。然后跳过后续步骤。

  3. Enter VR 动作添加到按钮:

    • 源 = 鼠标点击
    • 动作 = 全屏/VR
    • 类型 = 进入 VR

    Enter VR action in the main skin.
    在主皮肤中输入 VR 动作。

  4. 保存皮肤。

  5. 在 Web 输出 VR 属性中,检查 VR 窗格中是否选择了 启用(Enabled) 。

  6. 添加 VR 皮肤。这是与具有进入 VR 按钮的主皮肤不同的皮肤。

  7. 保存项目。您添加到主皮肤的 VR 按钮仅在支持 WebXR 的浏览器上可见。

使用立体全景

Pano2VR 原生支持立体图像和视频。

https://vimeo.com/352493324

进口

  1. 将立体声对作为顶部/底部或条带格式拖到查看器或游览浏览器中。★ 如果图像是条带,请将 “类型 ”更改为“ 条带 VR”
  2. 在 属性(Properties) 中,将该对定义为 左/右(Left/Right) 或 右/左(Right/Left) 的立体声对

旅游大楼

游览构建工作流与单视场图像相同。以任何方式链接全景图。您还可以在同一游览中混合立体声和单声道图像。

输出为 Web 并添加具有 Enter VR 按钮的主皮肤并添加 VR 皮肤。

自定义热点图像

如果游览节点没有蒙皮或热点模板,则旋转的地球仪将显示为默认热点图像。

如果要覆盖旋转的地球仪,则可以添加自定义热点图像。

如果要更改的游览节点热点不多,则可以手动设置热点图像(如下所述)。或者,您可以使用 VR 皮肤中的点热点模板来更改所有节点热点。

  1. 在查看器(或列表视图)中选择游览节点点热点。

  2. 对于自定义图像 ,单击文件夹以打开热点的图像。

  3. 选择调整图像大小或将其设置为 3D 扭曲 ,这会将图像固定到全景图。然后,您可以设置视野以使图像看起来更小或更大。

  4. 使用距离设置设置图像与中心的距离。保留基于位置数据的自动或取消选择自动并手动设置距离。仅当热点类型为 “游览节点” 时,此选项才可用。

★ 自定义图像(如旋转的地球仪)在指针位于其上方时将扩展,并在它离开时收缩。但是,使用 3D 失真将使热点静态,保持在上述步骤 4 中选择的大小(文件)。

修补

您可以使用修补工具快速修复图像、最低点、天顶等之间的移动。

  1. 在要修复的区域上添加一个补丁。

  2. 提取。这将在默认图像编辑器中打开两面的提取版本。左侧将是提取的补丁。

  3. 在照片编辑器中,如果使用克隆工具,请克隆右侧并在左侧盖章。这样左侧就被右侧克隆了。

自定义浮动菜单按钮

在沉浸式视图中,当您向上看时会出现一个按钮(汉堡菜单)(默认设置)。此按钮显示或隐藏皮肤。(请注意,热点将始终显示。了解如何自定义此按钮。

  1. 打开 VR 皮肤。
  2. 添加顶级图形皮肤元素(文本、矩形、图像、lottie、svg 等)。
  3. 为其提供 ID,_open_skin_close_skin
  4. 给它一个动作:
    • 源 = 鼠标点击
    • 动作 = 全屏/VR
    • 类型 = VR 皮肤可见性
    • 模式 = 切换
       VR Skin Visibility action in the VR skin.
      VR 皮肤中的 VR 皮肤可见性动作。
  5. 保存皮肤。
  6. 在 VR Web 输出属性中,将其应用为 VR 皮肤。
  7. 选择 浮动皮肤菜单(Floating Skin Menu)。
  8. 选择按钮的位置。 顶部底部
  9. 输出并测试皮肤。

在沉浸式视图中预览和测试

要在 VR 中查看项目,必须通过安全连接为项目提供服务。在头戴式设备中使用 Pano2VR 的实时更新功能,使用集成 Web 服务器预览和测试项目。在这里,我们概述了如何在 Meta Quest 上查看该项目。

  1. 检查是否选择了使用集成 Web 服务器 取消选择了仅本地主机, 并在 Web 服务器设置中启用了 HTTPS 服务器
    Web Server Settings
    Web 服务器设置
  2. 从菜单栏中打开集成 Web 服务器 工具 > 集成 Web 服务器
  3. 重新输出项目。你将看到 Web 服务器的日志填充。
  4. 确保实时更新已打开。
  5. 单击左上角的地址 (ssl) URL。这将打开您的默认浏览器,并且可能会出现有关继续的警告。根据您的浏览器,单击“ 显示更多” 或“ 高级 ”,然后继续(找到显示访问网站 继续 继续接受风险的链接)。
  6. 用手机扫描二维码。
  7. 分享 Meta Horizon 应用的链接。然后将链接保存到您的设备。(您还可以在应用程序的菜单中找到已保存的链接>已保存。
  8. 打开耳机中的链接。
  9. 在 Pano2VR 中,根据需要更新并保存项目。输出将在 Quest 浏览器中自动更新。

将项目从 WebVR 更新到 WebXR

在早期版本的 Pano2VR 中使用 WebVR 在沉浸式视图中查看项目。在 Pano2VR 6.1.6 中,播放器已更新为使用 WebXR。这需要更新项目。这仅适用于使用 Pano2VR 6.1.6 之前版本创建的项目。

要更新您的项目以使用 WebXR,请重新输出您的项目。

如果您不再有项目可用或需要比重新输出更快的解决方案,您可以替换播放器并编辑 HTML 页面:

  1. 使用 Pano2VR 6.1.6 或更高版本构建一个新项目,并输出该项目以在输出中生成一个新的 webxr 文件夹。
  2. 在要更新的项目中,将 webvr 文件夹替换为新的 webxr 文件夹。
  3. 从 Pano2VR 6.1.6 输出中复制新的 pano2vr_player.js 文件,并替换旧项目文件夹中的文件。
  4. 在文本编辑器中打开 HTML 页面并搜索 webvr 并替换为 webxr
  5. 在您最喜欢的 HMD 上进行测试。

另请参阅...

最后修改时间:2024 年 3 月 15 日