Compartir a través de


Capítulo 5 del tutorial de Mesh 201: Obtención de datos meteorológicos en directo

En este capítulo, pasaremos a Station 4, donde aprenderá a usar Mesh Cloud Scripting para obtener datos de orígenes internos o públicos y, a continuación, visualizarlos en un contexto 3D de la escena. Como se describe en el capítulo 1, la premisa aquí es que los asistentes a su experiencia pueden usar esta estación para aprender sobre las condiciones meteorológicas en tres ubicaciones donde están considerando la posibilidad de construir un parque eólico. Los asistentes podrán hacer clic en un globo interactivo y ver los datos meteorológicos en vivo de las tres ubicaciones.

Las estaciones 4 y 5 están situadas en el otro extremo de la Terraza sphere de las estaciones anteriores.

__________________________________

Configuración de esta estación

Para completar esta estación, deberá insertar una clave en algún código que le permita acceder a la API de datos meteorológicos. Vamos a obtener esta clave ahora para que no tenga que interrumpir el flujo de trabajo más adelante.

  1. Vaya a la página de registro de weatherapi.com.

  2. En esa página, siga las instrucciones para registrarse en el plan de prueba.

    __________________________________

    Tendrá que abrir el correo electrónico que le envían, activar su cuenta y, a continuación, iniciar sesión en su sitio.

  3. En la página De bienvenida, haga clic en "Plan Pro Plus".

    __________________________________

  4. Para este tutorial, no es necesario tener un plan de pago. Haga clic en el botón Degradar en "Gratis" y, a continuación, en el cuadro de diálogo que aparece, haga clic en Cerrar.

    __________________________________

  5. En el menú de la izquierda, en Panel, seleccione API.

    __________________________________

  6. Seleccione el botón Copiar situado junto al campo Clave de API , pegue la clave en un editor de texto y guarde el archivo de texto.

    __________________________________

    Si la operación de copia se realiza correctamente, el texto del botón Copiar cambia a Copiado.

Adición del objeto prefabricado mesh cloud scripting

  1. Abra la escena de StartingPoint .

  2. En jerarquía, haga clic con el botón derecho en un espacio vacío y, a continuación, en el menú contextual, seleccione Mesh Toolkit>Set up Cloud Scripting (Configurar scripting en la nube).

    __________________________________

    Esto agrega un GameObject denominado Mesh Cloud Scripting que tiene un componente con el mismo nombre asociado.

    __________________________________

    Cualquier GameObject que quiera tener bajo el control de scripting en la nube debe agregarse como elemento secundario a Mesh Cloud Scripting GameObject.

    Nota: El componente mesh cloud scripting contiene una propiedad denominada Enable Visual Scripting(Habilitar scripting visual). Esto permite que los scripts en la nube de Mesh se comuniquen con scripts visuales. Puede dejar esta opción sin seleccionar.

Agregar el prefabricado para la estación 4

  1. En la carpeta Proyecto , vaya a Assets>MeshCloudScripting y, a continuación, arrastre 4 - GlobeWithCloudScripting a la jerarquía y colóquelo como un objeto secundario en Mesh Cloud Scripting.

    __________________________________

    Este objeto prefabricado proporciona el cuadro de información de texto y un objeto prefab anidado denominado Earth que contiene el modelo del mundo.

    __________________________________

  2. Ajuste la vista para que esté directamente delante de la estación 4 y examine la estación 4.

    __________________________________

Insertar la clave de API para weatherapi.com

  1. En Jerarquía, seleccione mesh Cloud Scripting GameObject.

  2. En el Inspector, vaya al componente Mesh Cloud Scripting y, a continuación, haga clic en Abrir carpeta de aplicación.

    __________________________________

    Se abrirá la carpeta que contiene los archivos de Mesh Cloud Scripting en windows Explorador de archivos.

  3. Abra el archivo denominado appsettings. UnityLocalDev.json en el editor de código. Las cuatro últimas líneas de código del archivo contienen valores de configuración.

    __________________________________

    No es necesario hacer nada para esta primera línea...

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

    ... pero en la línea siguiente, reemplace el texto "Pegar clave de WEATHER API aquí" por la clave de API que copió anteriormente.

    __________________________________

    Puede pasar por alto las dos últimas líneas: trabajaremos con ellas en el siguiente capítulo.

  4. Guarde y cierre el archivo JSON.

Actualización del archivo csproj

  1. En la ventana Explorador de archivos que muestra los archivos de scripting en la nube de Mesh, abra el archivo denominado StartingPoint.csproj en el editor de código.

    __________________________________

  2. Copie el texto siguiente:

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

    ... y, a continuación, péguelo en el archivo justo encima </Project> al final del archivo.

    __________________________________

    Esto garantiza que incluyamos algunos scripts de la carpeta WeatherAPI local.

    __________________________________

  3. Guarde y cierre el archivo.

Agregar código que haga que el mundo sea interactivo

  1. En la ventana Explorador de archivos que muestra los archivos de scripting en la nube de Mesh, abra el archivo denominado App.cs en el editor de código.

    __________________________________

    Lo primero que haremos es garantizar que, cuando un asistente haga clic en el mundo, se actualicen las pantallas de los datos meteorológicos.

  2. En el archivo App.cs, busque el primer comentario "Pegar código aquí" ubicado dentro del StartAsync() método .

    __________________________________

  3. Copie el código siguiente.

        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. Reemplace el comentario "Pegar código aquí" que acaba de encontrar por el código que copió.

    __________________________________

    El código hace lo siguiente:

    • Inicializa la variable refreshButton con Earth GameObject en la escena.
    • Inicializa la variable refreshButtonNode con interactableNode asociado a Earth GameObject. (Si un objeto GameObject de la escena tiene un componente mesh interactable setup asociado, lo que hace Earth , el componente agrega un objeto Mesh Cloud Scripting InteractableNode).
    • Cuando un asistente hace clic en el mundo, desencadena el evento Selected de InteractableNode y llama al método GetCurrentWeather . Esto genera una solicitud HTTP para obtener los datos meteorológicos.
  5. Guarde el archivo.

Prueba del trabajo

  1. En el Editor de Unity, guarde el proyecto y, a continuación, presione el botón Reproducir.

  2. Tu avatar se genera a un lado de la terraza de Sphere que contiene las tres primeras estaciones. Navegue hasta el lado opuesto de la terraza sphere y, a continuación, colócate delante de la estación 4.

    __________________________________

  3. Para ver los datos meteorológicos, haga clic en cualquier lugar del mundo. La temperatura, la velocidad media del viento y la velocidad máxima del viento se muestran en tres ciudades: 1) Lagos, Nigeria, 2) Dublín, Irlanda y 3) Redmond, WA.

    __________________________________

  4. Cuando haya terminado, vuelva a presionar el botón Reproducir para salir del modo de reproducción.

Pasos siguientes