将 WebSlate 添加到环境

概述

显示 Web 内容并与之交互概述

在网格工具包中,要使用的 WebSlate Prefab 称为 WebSlateFramed。 它包含一个 URL 参数,可以指定用于控制 WebSlate 显示的内容。 它还附带了一个组件,允许事件组织者 实时更改 WebSlate 的 URL。 当包含 WebSlate 的网格事件启动时,WebSlate 将使用提供的 URL 加载其内容。

说明

  • 网格工具包中还有一个名为 WebSlate 的 Prefab,但它不支持实时更新网格事件中的 URL,因此不建议这样做。

  • WebSlate 的大小和形状将与放置的四个 GameObject 的大小和形状匹配。 通常,这是 WebSlate prefab 内部烘焙的象限。

  • 可以向场景添加多个 WebSlate。 基于网格的网格事件中的用户数不会影响 WebSlate 性能;WebSlate 资源在用户计算机上本地初始化。

添加 WebSlate

从菜单中添加 WebSlateFramed prefab

  1. 右键单击层次结构内部,然后在上下文菜单中选择“网格工具包>WebSlateFramed”。

    提示:还可以单击“层次结构”窗口左上角的“+”按钮以查看相同的菜单。

    搜索 WebSlate 后的结果列表的屏幕截图。

搜索并添加 WebSlateFramed prefab

  1. 在“搜索”字段中,键入“WebSlateFramed”。确保已选择“ 所有 ”筛选器。

    搜索 WebSlate 后的结果列表的屏幕截图。

  2. 将所需的 prefab 拖到 场景 视图或 层次结构中。

指定默认 URL

  1. 在层次结构,展开 WebSlateFramed GameObject,然后选择其名为 WebSlate 的子对象。

    层次结构中突出显示的名为 WebSlate 的 WebSlateFramed 子对象的屏幕截图。

  2. 在检查器,导航到 WebSlate 组件。

  3. “当前 URL”字段更新为希望在网格事件中默认加载 WebSlate 的 URL

    突出显示 WebSlate 的“当前 URL”字段的屏幕截图。

使 WebSlate 在事件中可控制

向环境添加 WebSlate 时,请为其设置默认 URL,但如果事件组织者希望使用控制面板实时更改 URL,该怎么办? 为了适应这一点, WebSlateFramed Prefab 附带名为 WebSlate 可控制的组件。 它还附带 对象可 控制组件,该组件允许事件组织者在事件期间启用或禁用 WebSlate。

WebSlates 的可控制功能使环境创建者能够保留环境的设计和美学,同时使运行多个事件(作为模板或不作为模板)的组织者能够根据活动的主题更改内容。 请注意,只能在实时事件期间添加或更改可控制的 URL。 自定义期间添加的 URL(在编辑模式下)不会保存,因此不会保留在多个事件中;WebSlates 将默认为 Unity 中开发人员每次添加的 URL。

借助此功能,WebSlate 提供以下功能:

  • 事件组织者:切换 URL、可见性(开/关)和(可选) 防止暂停 (保持 WebSlate 始终打开)。 组织者可以使用主机面板在事件期间更改 URL;这将在事件中立即更新所有用户的 WebSlate(全局刷新)。 
  • 事件与会者:当与会者使用光标或控制器将鼠标悬停在 WebSlate 上时,带有内置刷新按钮的菜单栏和简要说明 WebSlates 的单用户性质的工具提示将显示(某些 Web 应用可能提供共享体验)。 这提供了一种返回组织者设置的 URL 的方法,以防用户导航,并且可以在 Web 应用在事件期间出现问题时使用。 

添加可控制的名称和默认 URL

注意:如果现有环境中已有 WebSlateFramed prefab,若要获取可控制功能,请将网格工具包升级到版本 24.10 或更高版本。 执行此操作后,可以从下面的步骤 3 开始。

  1. 在层次结构,选择添加的 WebSlateFramed prefab。

    层次结构中突出显示的 WebSlateFramed prefab 列表的屏幕截图。

  2. 在检查器,导航到 WebSlate 可控制组件,然后在“显示名称”字段中为可控制组件添加名称。 确保名称指示环境中 WebSlate 的函数;这是组织者将在控制面板中看到的内容,并在需要时用于实时更新 WebSlate。 对于此示例,我们将使用“Azure 仪表板”。

    层次结构中突出显示的 WebSlateFramed prefab 列表的屏幕截图。

  3. 对象可 控制组件中,以相同的方式提供名称。

  4. 在层次结构,展开 WebSlateFramed 组件,然后选择其名为 WebSlate 的子对象。

  5. 在检查器,将“当前 URL”字段更新为希望在网格事件中默认加载 WebSlate 的 URL。

    层次结构中突出显示的 WebSlate 子对象的屏幕截图。

  6. 在播放模式下测试 WebSlate ,以确保 URL 正确显示。

更多 WebSlate 可控制设置

WebSlate 可控制组件列表的屏幕截图,其中突出显示了“阻止挂起”设置。

阻止挂起WebSlate 可控制组件):此设置显示在控制面板中,默认设置处于关闭状态。 这意味着,如果与会者离开 WebSlate 并且 WebSlate 不再在其视图中 30 秒或更长时间,则 Webslate 将自动暂停以节省内存。 如果 WebSlate 再次进入与会者视图,它将重新加载。

在某些情况下,内容可能需要为与会者播放,而不考虑他们在活动中的位置(例如,如果 WebSlate 正在运行实时流内容)。 在这种情况下,最好打开“阻止挂起”设置。

事件组织者可以在事件中打开和关闭此设置。 如果要将默认设置更改为“on”,请选中“ 阻止挂起 ”复选框。

BackplateWebSlate 可控制组件):WebSlateFramed Prefab 附带了此处选择的 *Backplate GameObject,以提供“frame”。 可以将此项更改为“无”以关闭帧,但我们建议你按原样保留此设置,并将此设置保留到事件组织者以打开或关闭后板。

可见对象可控制组件):此设置也会显示在控制面板中,其中事件组织器可以打开或关闭所有活动与会者的 WebSlate 的可见性。 如果希望默认值为“可见”,请选择此选项。

注意:如果这些设置中的任何一项在事件期间发生更改,这些更改将实时反映给所有用户。

在网格事件中测试可控制

测试 WebSlate 的完整可控制功能只能在网格事件中发生。 在我们的示例事件中,我们的示例可控制 WebSlate“Azure 仪表板”显示在控制面板中。

控制面板的屏幕截图,其中突出显示了可控制的 Webslate。

事件组织者可以单击 Azure 仪表板上的向下箭头以查看 URL,然后可以更改 URL。

突出显示 WebSlate 的可编辑 URL 的控制面板屏幕截图。

如前所述,组织者可以在活动期间更改 WebSlate 的多个设置,例如 “阻止挂起”、“ 显示后板”和 “可见 ”(打开/关闭)。

突出显示了 WebSlate 的各种功能的控制面板屏幕截图。

WebSlate 菜单

当任何人(用户或组织者)接近 WebSlate 并使用光标或 VR 控制器将鼠标悬停在 WebSlate 上时,将显示 WebSlate 菜单。

突出显示了 WebSlate 的各种功能的控制面板屏幕截图。

刷新 (左按钮):与会者可以单击此项,将个人视图返回到 WebSlate 的默认网页。

信息 (右按钮):这提供了一个工具提示,提醒与会者他们看到的内容对他们是唯一 的,而不是与其他与会者共享,除非 WebSlate 显示协作 Web 应用

提示

  • 可以通过将 WebSlate.cs 作为脚本组件直接添加到所选的 3D 对象并将 UnlitWebSlate.mat 添加到 MeshRenderer Material,将 WebSlate 放在除 Quad 以外的 GameObject 上。 请注意,这可能会导致视觉纹理拉伸、反转和/或旋转。

  • WebSlate 加载默认 URL。 应将此 URL 替换为你希望用于每个 WebSlate 的 URL。 亮度参数设置为 1.0(浏览器亮度的 100%) 。

  • WebSlates 在关闭屏幕过长后会自动暂停自身。 如果需要确保给定的 WebSlate 始终运行(如实时流或连续音频播放),请在 WebSlate 组件中选择“ 阻止挂起”。 请注意,这样做可能会导致场景消耗更多资源,因为 WebSlate 将始终保持活动状态。

  • 若要将图像 URL 大小调整为 WebSlate 的大小,请将 URL 包装在 HTML 中。 通过可视化脚本使用 WebSlate LoadHTML API,将此 HTML 内容呈现到 WebSlate 上。 将构造的 HTML 添加到 HTMLContent 属性。 或者,可以使用 LoadHTMAsset API 并将 HTML 作为资产传递。 将图像 URL 替换为图像 URL。

    使用 LoadHTML 和 LoadHTMLAsset API 使用图像 URL 和视觉脚本图的示例 HTML:

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

    显示如何设置视觉脚本以使用 LoadHTML API 的屏幕截图。

    显示如何设置 Visual Scripting 以使用 LoadHTMLAsset API 的屏幕截图。

后续步骤