Construisez une carte 3D dynamique avec WRLD 3D

Utilisez les données de l'API 3D WRLD 3D pour créer des cartes 3D à effets visuels dynamiques et exceptionnels pour améliorer la visualisation des données et les capacités narratives. Cette série de tutoriels vous guidera à travers des étapes simples sur les thèmes populaires de la série télévisée pour apprendre à configurer et à exploiter des cartes 3D sur la plate-forme WRLD.

Utilisez l'API audio HTML5 pour ajouter des éléments audio pour améliorer l'expérience immersive du récit de la carte 3D. Implémentez les éléments de l'histoire interactifs avec JavaScript, passez à différents points de coordonnées sur la carte, accompagnés de signaux audio et visuels correspondants. Personnalisez votre carte 3D avec des changements météorologiques en temps réel et différents paramètres de temps pour refléter le laps de temps dans différentes scènes ou histoires. Explorez des fonctionnalités avancées telles que la création de cartes d'information sur la mise en évidence et les fenêtres contextuelles pour fournir un contexte supplémentaire et une interactivité dans votre environnement de carte 3D.

Cet article est parrainé par WRLD 3D. Merci de soutenir les partenaires qui ont rendu le point de point possible.

Ce qui suit se produit entre 7h00 et 8h00 la veille de Noël. L'événement se produit en temps réel.

Malgré nos fortes capacités de collecte de données, nous ne pouvons rien faire lorsqu'il s'agit de visualiser les données dans le monde en trois dimensions dans lequel nous vivons. Nous regardons les graphiques 2D et les entrées de journal, mais la grande quantité de données que nous extraisons du monde est logique dans un environnement tridimensionnel. De plus, il est très utile de visualiser ces données lorsqu'il est appliqué à un modèle tridimensionnel.

C'est le problème que la réalité augmentée s'efforce de résoudre. Par rapport à l'environnement fictif de la réalité virtuelle, la réalité augmentée peut nous aider à résoudre de nombreux problèmes pratiques; Les cartes sont les premières des nombreuses applications de la réalité augmentée.

Lorsque WRLD nous a contactés dans l'espoir que nous écrivions sur sa plate-forme, j'ai été immédiatement attiré par les graphiques et les performances de sa plate-forme. Cependant, plus j'utilise sa plate-forme, plus le praticité de son API et la fidélité de ses données de carte.

Nous publierons une série de tutoriels démontrant comment utiliser cette plate-forme pour apporter des informations dans le monde où elle s'applique. Chaque tutoriel est sur le thème des séries télévisées populaires. Comme vous l'avez peut-être deviné, le premier tutoriel est d'environ 24 heures.

Dans ce tutoriel, nous apprendrons à démarrer avec la plate-forme WRLD. Nous rendrons la carte la plus simple selon l'exemple de documentation. Nous allons ensuite créer un environnement local pour compiler le code; et commencer à raconter des histoires avec.

Nous couvrirons les sujets suivants:

• Rendre la carte en fonction du nom de l'emplacement
• Déplacer la carte pour une série d'événements
• Mettez en surbrillance les événements de construction et de conception de chaque bâtiment
• lire des fichiers son
Changer les conditions météorologiques et l'heure de la journée sur la carte

Le code de ce tutoriel peut être trouvé sur GitHub. Il a été testé sur des versions modernes de Firefox, Node et MacOS.

débutant

La façon la plus simple de commencer est de suivre le premier exemple de la documentation. Avant cela, nous avons besoin d'un compte. Visitez https://www.wrld3d.com et cliquez sur "Inscrivez-vous".

Après la connexion, cliquez sur "Developer" et "Access API Key".

Créez une nouvelle clé API pour votre application. Vous pouvez le nommer comme vous le souhaitez, mais vous devrez copier la touche générée plus tard ...

Nous pouvons obtenir le code du premier exemple du site officiel de la documentation. Je l'ai mis dans Codepen et j'ai remplacé les coordonnées par celles de New York:

En plus d'inclure le SDK JavaScript et les feuilles de style, nous n'avons besoin que d'environ 5 lignes de code formatées pour rendre une belle carte de New York! La première carte des paramètres est l'ID de l'élément que WRLD doit rendre la carte. Le second est la clé API que nous avons générée. Le troisième est l'objet de configuration. Cet objet contient des coordonnées au centre de la carte et du niveau de zoom facultatif.

Définissez la chaîne de construction

Codepen est parfait pour les présentations rapides; mais nous avons besoin de quelque chose de plus puissant et plus facile à rendre. Installons quelque chose de simple qui compilera tout notre JavaScript moderne dans une version que la plupart des navigateurs peuvent comprendre.

Parceljs a récemment été annoncé comme un bundler Web de configuration rapide et nul. Tessons-le. Tout d'abord, nous devons installer des colis en tant qu'application globale via NPM:

Ensuite, nous pouvons créer des fichiers pour notre projet. Nous avons besoin d'un fichier JavaScript, d'un fichier CSS et d'un fichier d'entrée HTML:

<code>npm install -g parcel-bundler</code>

Cela vient du tutoriel / app.js

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

<code>npm install -g parcel-bundler</code>

Cela vient du tutoriel / app.css

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

Cela vient du tutoriel / index.html

Faites-vous attention à la façon dont App.js nécessite WRLD.js? Nous devons installer le sdk wrld javascript:

<code>@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #000000;
}</code>

Ensuite, nous pouvons commencer à construire et à exécuter le fichier local à l'aide de la parcelle:

<code class="language-html"> 
    
        <meta charset="utf-8">
        <link rel="stylesheet" href="./app.css">
        <title>WRLD入门</title>
    
    
        <div id="map"></div>
        
    
</code>

Cela lancera un serveur de développement local et un serveur de développement local et des fichiers JS et CSS. Le processus est le suivant:

Ouvrez l'URL qu'il affiche dans votre navigateur et vous devriez revoir la carte de New York. Lorsque nous modifions les fichiers JS et CSS, ces fichiers se recompileront et se rechargeront automatiquement dans le navigateur. La colis semble tenir sa promesse.

Et, c'est exactement ce dont nous avons besoin - une chaîne de construction à faible coût qui nous permettra de nous concentrer sur le travail avec WRLD!

La colis est encore assez nouveau. Vous pouvez avoir du mal à gérer des workflows hautement personnalisés ou des exigences de construction; et la documentation doit encore expliquer quoi faire dans ces situations. Néanmoins, je pense que cette chaîne de construction simple répondra à nos besoins, et Parcel tient sa promesse ici.

Convertir le nom en coordonnées

Parfois, nous connaissons les coordonnées exactes de l'emplacement que nous envisageons. Parfois, nous ne connaissons que le nom de l'emplacement. Prenons un revirement rapide et voyons comment déterminer les coordonnées d'un emplacement lorsque nous ne connaissons que le nom de cet emplacement.

Il s'agit de l'un des rares services qui ne sont pas encore disponibles sur la plate-forme WRLD. Utilisons donc l'API Google pour le calculer. Nous avons besoin d'une autre clé API, alors visitez https://developers.google.com/maps/documentation/geocoding/get-api-key et cliquez sur "Get Key":

Ensuite, nous pouvons utiliser le service Google Geocoding pour trouver les coordonnées de l'adresse en modifiant légèrement notre javascript:

<code>npm init -y
npm install --save wrld.js</code>

Cela vient du tutoriel / app.js

J'ai refactorisé la clé dans un objet. Nous pouvons même déplacer ces clés dans un fichier de variable d'environnement et exclure ce fichier de GIT. De cette façon, la clé peut être utilisée, mais cachée au public. J'ai également déplacé mon code dans une fonction de flèche courte asynchrone afin que je puisse utiliser l'async et attendre; et pour que cela se produise après le chargement du document.

Ensuite, nous pouvons définir l'adresse à rechercher. Il est préférable de coder l'adresse afin qu'il soit utilisé comme paramètre de chaîne de requête. Nous pouvons saisir ceci avec la clé API Google dans le point de terminaison de l'API GeoCodé pour obtenir les résultats.

Continuez à décommenter l'instruction Console.log afin que vous puissiez voir à quoi ressemble l'URI codé et à quoi ressemble le résultat que Google nous renvoie. Nous avons obtenu des résultats très détaillés de Google, mais la partie que nous voulions est dans les résultats [0] .geometry.Location. En utilisant la destruction d'objets, nous ne pouvons extraire que les touches LAT et GNL de cet objet.

Enfin, nous pouvons les saisir dans la fonction de carte et la carte rendra le bâtiment d'État Empire. Comme je l'ai dit, nous connaissons généralement les coordonnées du centre de la carte. Mais quand nous ne savons pas: ce service et ce code nous aideront à les trouver.

Le reste est similaire à la sortie précédente, avec seulement des ajustements mineurs à la langue et à l'expression pour éviter la répétition et maintenir la maîtrise. Je ne peux pas réécrire tout en complet en raison des limitations de l'espace, mais vous pouvez continuer avec le pseudo-original en fonction des exemples ci-dessus. La clé consiste à remplacer les mots clés, à ajuster la structure de la phrase et à utiliser les synonymes pour les remplacer, afin que l'article soit différent sans modifier la signification d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!