网格 201 教程第 5 章:获取实时天气数据

在本章中,我们将转到 Station 4,你将了解如何使用网格云脚本从内部或公共源获取数据,然后在场景中的 3D 上下文中将其可视化。 如第 1 章所述,此处的前提是,体验中的与会者可以使用此站了解他们正在考虑建造风电场的三个地点的天气状况。 与会者将能够单击交互式地球,并查看来自三个地点的实时天气数据。

车站 4 和 5 位于上一站的 Sphere 露台的另一端。

__________________________________

为此工作站设置

若要完成此工作站,需要将密钥插入到某些代码中,以便访问天气数据 API。 现在,让我们获取此密钥,以便以后无需中断工作流。

  1. 导航到 weatherapi.com 注册页面

  2. 在该页上,按照说明注册试用计划。

    __________________________________

    你需要打开他们发送的电子邮件,激活你的帐户,然后在他们的网站上登录。

  3. “欢迎返回 ”页上,单击“专业加号计划”。

    __________________________________

  4. 在本教程中,不需要有付费计划。 单击“免费”下的降级按钮,然后在弹出的对话框中单击“关闭”。

    __________________________________

  5. 在仪表板下的左侧菜单中,选择 API

    __________________________________

  6. 选择 API 密钥字段旁边的“复制”按钮,然后将密钥粘贴到文本编辑器中,然后保存文本文件。

    __________________________________

    如果复制操作成功,“复制”按钮上的文本将更改为“已复制”。

添加网格云脚本 prefab

  1. 打开 StartingPoint 场景。

  2. 在层次结构中,右键单击空白区域,然后在上下文菜单中选择“网格工具包>设置云脚本”。

    __________________________________

    这会添加一个名为 Mesh Cloud ScriptingGameObject,该脚本具有附加了同名的组件。

    __________________________________

    要控制云脚本的任何 GameObject 都必须作为子 级添加到网格云脚本 GameObject。

    注意网格云脚本 组件包含名为 “启用视觉脚本”的属性。 这使网格云脚本能够与视觉脚本进行通信。 可以保留此未选中状态。

为工作站 4 添加 prefab

  1. Project 文件夹中,导航到 Assets>MeshCloudScripting,然后将 4 - GlobeWithCloudScripting层次结构,并将其作为子对象放置在网格云脚本中。

    __________________________________

    此 prefab 提供文本信息框和一个名为 地球 的嵌套预制表,其中包含地球的模型。

    __________________________________

  2. 调整视图,使你直接位于车站 4 前面并查看。

    __________________________________

插入用于 weatherapi.com 的 API 密钥

  1. 在层次结构,选择网格云脚本 GameObject。

  2. 在检查器中,导航到网格云脚本组件,然后单击“打开应用程序”文件夹

    __________________________________

    这会打开包含 Windows 文件资源管理器中网格云脚本的文件的文件夹。

  3. 打开名为 appsettings 的文件。 在代码编辑器中UnityLocalDev.json。 文件中的最后四行代码包含配置设置。

    __________________________________

    无需为此第一行执行任何操作...

    "WEATHER_API_URI": "http://api.weatherapi.com/v1/current.json?key="

    ...但在下一行中,将“在此处粘贴天气 API 密钥”文本替换为之前复制的 API 密钥。

    __________________________________

    可以忽略最后两行-我们将在下一章中使用这些行。

  4. 保存并关闭 JSON 文件。

更新 csproj 文件

  1. 在显示网格云脚本文件的文件资源管理器窗口中,在代码编辑器中打开名为 StartingPoint.csproj 的文件。

    __________________________________

  2. 复制以下文本:

    <ItemGroup> <Folder Include="WeatherAPI\" /> </ItemGroup>

    ...然后将其粘贴到文件末尾的正上方 </Project> 的文件。

    __________________________________

    这可确保从本地 WeatherAPI 文件夹中包括一些脚本。

    __________________________________

  3. 保存并关闭该文件。

添加使全球交互的代码

  1. 在显示网格云脚本文件的文件资源管理器窗口中,在代码编辑器中打开名为App.cs的文件。

    __________________________________

    我们将做的第一件事是确保当与会者单击全球时,刷新天气数据的显示。

  2. 在App.cs文件中,找到方法内 StartAsync() 的第一个“在此处粘贴代码”注释。

    __________________________________

  3. 复制以下代码。

        var refreshButton = _app.Scene.FindFirstChild("Earth", true) as TransformNode;
        var refreshButtonNode = refreshButton?.FindFirstChild<InteractableNode>(true);
    
        if (refreshButtonNode != null)
        {
            refreshButtonNode.Selected += async (_, _) =>
            {
                await GetCurrentWeather(_latlong);
            };
        }
    
  4. 将刚刚找到的“在此处粘贴代码”注释替换为复制的代码。

    __________________________________

    该代码执行以下操作:

    • 使用场景中的 Earth GameObject 初始化 refreshButton 变量。
    • 使用附加到 Earth GameObject 的 InteractableNode 初始化 refreshButtonNode 变量。 (如果场景中的 GameObject 有 附加的网格可交互安装 组件, 地球 会执行该操作,该组件会添加网格云脚本 交互Node
    • 当与会者单击全球时,它会触发 InteractableNode 的 Selected 事件并调用 GetCurrentWeather 方法。 这会生成一个 HTTP 请求 来获取天气数据。
  5. 保存文件。

测试你的工作

  1. 在 Unity 编辑器中,保存项目,然后按“播放”按钮。

  2. 你的头像在 Sphere 露台的一侧生成,其中包含前三个工作站。 导航到 Sphere 露台的对面,然后将自己定位在车站 4 前面。

    __________________________________

  3. 若要查看天气数据,请单击全球任何地方。 三个城市显示了温度、平均风速和峰值风速:1)拉各斯、尼日利亚、2)都柏林、爱尔兰和西澳大利亚州雷德蒙德。

    __________________________________

  4. 完成后,再次按“播放”按钮退出“播放”模式。

后续步骤