検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >WRLD 3Dで動的3Dマップを構築します

WRLD 3Dで動的3Dマップを構築します

Christopher Nolan
Christopher Nolanオリジナル
2025-02-16 09:22:11390ブラウズ

WRLD 3D APIとマップデータを使用して、動的で優れた視覚効果3Dマップを作成して、データの視覚化と物語機能を強化します。このチュートリアルシリーズでは、人気のあるテレビシリーズのテーマに関する簡単な手順をガイドして、WRLDプラットフォームで3Dマップをセットアップおよび操作する方法を学びます。

Build a Dynamic 3D Map with WRLD 3D

HTML5オーディオAPIを使用してオーディオ要素を追加して、3Dマップの物語の没入型エクスペリエンスを強化します。 JavaScriptでインタラクティブなストーリー要素を実装し、マップ上の異なる座標ポイントに移動し、対応するオーディオとビジュアルキューを伴います。リアルタイムの天気の変更と異なる時間設定で3Dマップをカスタマイズして、さまざまなシーンやストーリーの時間経過を反映します。 3Dマップ環境で追加のコンテキストとインタラクティブ性を提供するために、ハイライトやポップアップ情報カードの構築などの高度な機能を調べます。

この記事はWRLD 3Dが後援しています。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

クリスマスイブの午前7時から午前8時の間に次のことが起こります。イベントはリアルタイムで発生します。

私たちの強力なデータ収集機能にもかかわらず、私たちが住んでいる3次元の世界でデータを視覚化することになると、私たちにできることは何もありません。 2Dチャートとログエントリを見つめていますが、世界から抽出する大量のデータは、3次元環境で理にかなっています。さらに、3次元モデルに適用された場合、これらのデータを視覚化することは非常に便利です。

これは、拡張現実が解決に努めている問題です。仮想現実の架空の環境と比較して、拡張現実は、私たちが元々私たちの周りの現実の世界に消費した多くの実際の問題を適用するのに役立ちます。マップは、拡張現実の多くのアプリケーションの最初のものです。

WRLDがそのプラットフォームについて書くことを期待して私たちに連絡したとき、私はすぐにそのプラットフォームのグラフィックとパフォーマンスに惹かれました。ただし、プラットフォームを使用すればするほど、APIの実用性とマップデータの忠実度に魅了されます。

このプラットフォームを使用して、それが適用される場所に情報を提供する方法を示す一連のチュートリアルをリリースします。各チュートリアルは、人気のあるテレビシリーズをテーマにしています。ご想像のとおり、最初のチュートリアルは約24時間です。

このチュートリアルでは、WRLDプラットフォームを開始する方法を学びます。ドキュメントの例に従って、最も単純なマップをレンダリングします。その後、コードをコンパイルするためのローカル環境を作成します。

次のトピックについて説明します

ロケーション名
    に基づいてマップをレンダリングします 一連のイベントのためにマップを移動
    • 各建物の建物とデザインのイベントを強調表示
    • HTML5 Audio API
  • を使用してサウンドファイルを再生します
    • 地図上の気象条件と時刻を変更
  • このチュートリアルのコードはgithubで見つけることができます。 Firefox、Node、MacOSの最新バージョンでテストされています。

    • 初心者

    始める最も簡単な方法は、ドキュメントの最初の例に従うことです。その前に、アカウントが必要です。 https://www.wrld3d.comにアクセスし、[登録]をクリックします。

    Build a Dynamic 3D Map with WRLD 3D ログインした後、「開発者」と「アクセスAPIキー」をクリックします。

    Build a Dynamic 3D Map with WRLD 3D アプリケーション用の新しいAPIキーを作成します。好きなように名前を付けることができますが、生成されたキーを後でコピーする必要があります...

    Build a Dynamic 3D Map with WRLD 3D 公式ドキュメントWebサイトから最初の例のコードを取得できます。私はそれをCodepenに入れて、座標をニューヨークの座標に置き換えました：

    JavaScript SDKとStyleSheetsを含めることに加えて、美しいニューヨークの地図をレンダリングするには、約5行のフォーマットされたコードしか必要です！最初のパラメーターマップは、WRLDがマップをレンダリングする要素のIDです。 2つ目は、生成したAPIキーです。 3つ目は構成オブジェクトです。このオブジェクトには、マップの中心に座標とオプションのズームレベルが含まれています。

    ビルドチェーンを設定します

    Codepenは、迅速なプレゼンテーションに最適です。私たちのすべての最新のJavaScriptをほとんどのブラウザが理解できるバージョンにコンパイルするシンプルなものを設定しましょう。

    ParcelJSは最近、高速でゼロの構成Webバンドラーとして発表されました。テストしましょう。まず、npm経由でグローバルアプリケーションとして小包をインストールする必要があります：

    次に、プロジェクトのファイルを作成できます。 JavaScriptファイル、CSSファイル、およびHTMLエントリファイルが必要です。 

<code>npm install -g parcel-bundler</code>
これは、チュートリアル/app.js

から来ています 

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

これは、チュートリアル/app.css

から来ています 
<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>
これは、チュートリアル/index.html

から来ています

app.jsがwrld.jsを必要とする方法に注意を払っていますか？ WRLD JavaScript SDK：

をインストールする必要があります 

<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>
その後、小包を使用してローカルファイルの構築と実行を開始できます。

これにより、ローカル開発サーバーとバンドルJSおよびCSSファイルが開始されます。プロセスは次のとおりです 
<code class="language-html"> 
    
        <meta charset="utf-8">
        <link rel="stylesheet" href="./app.css">
        <title>WRLD入门</title>
    
    
        <div id="map"></div>
        
    
</code>

ブラウザに表示されるURLを開き、ニューヨークのマップが再度表示されるはずです。 JSおよびCSSファイルを変更すると、これらのファイルはブラウザで自動的に再コンパイルおよびリロードされます。小包はその約束を果たしているようです。

そして、それがまさに私たちが必要とするものです - WRLDで仕事を成し遂げることに集中できる低コストのビルドチェーンです！ Build a Dynamic 3D Map with WRLD 3D

小包はまだまったく新しいものです。高度にカスタマイズされたワークフローを扱うのに苦労したり、要件を構築したりする必要があります。それにもかかわらず、私はこのシンプルなビルドチェーンが私たちのニーズを満たすと思います、そして、パーセルはここでその約束を果たします。

名前を座標に変換

検討している場所の正確な座標を知っていることがあります。場所の名前のみを知っている場合があります。すぐに転換して、その場所の名前だけを知っているときに、場所の座標を決定する方法を見てみましょう。

これは、WRLDプラットフォームでまだ利用できない数少ないサービスの1つです。 Google APIを使用して計算しましょう。別のAPIキーが必要なので、https：//developers.google.com/maps/documentation/geocoding/get-api-keyにアクセスして、「key」：

次に、Google Geocodingサービスを使用して、JavaScriptをわずかに変更することにより、アドレスの座標を見つけることができます。

Build a Dynamic 3D Map with WRLD 3D これは、チュートリアル/app.js

から来ています 
<code>npm init -y
npm install --save wrld.js</code>
キーをオブジェクトにリファクタリングしました。これらのキーを環境変数ファイルに移動して、Gitからそのファイルを除外することもできます。これにより、キーを使用できますが、一般から隠されています。また、コードを非同期の短い矢印関数に移動して、ドキュメントがロードされた後に発生するようにしました。

次に、探すアドレスを定義できます。クエリ文字列パラメーターとして使用されるように、アドレスをエンコードするのが最善です。これをGoogle APIキーと一緒にGeocoded APIエンドポイントに入力して、結果を取得できます。

console.logステートメントを継続して、エンコードされたURIがどのように見えるか、Googleが返す結果を確認できるようにします。 Googleから非常に詳細な結果を得ましたが、私たちが望んでいた部分は結果[0] .geometry.locationです。オブジェクトの破壊を使用して、そのオブジェクトのLATおよびLNGキーのみを抽出できます。

最後に、これらをマップ関数に入力することができ、マップはエンパイアステートビルディングをレンダリングします。私が言ったように、私たちは通常、マップの中心の座標をすでに知っています。しかし、私たちが知らないとき：このサービスとコードは私たちがそれらを見つけるのに役立ちます。

残りは以前の出力に似ており、繰り返しを避けて流encyさを維持するために、言語と表現にわずかな調整しかありません。 スペースの制限のためにすべてを完全に書き換えることはできませんが、上記の例に基づいて擬似オリジナルを続けることができます。 重要なのは、キーワードを置き換え、文の構造を調整し、同義語を使用してそれらを置き換えることです。そうすれば、記事が元の意味を変えずに異なるように見えます。

以上がWRLD 3Dで動的3Dマップを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 firefox css html npm 字符串 map JS console 对象 事件 异步 location href 样式表 github git macos https 重构
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSセレクターとカスタム属性でプロジェクトをアップグレードします次の記事：CSSセレクターとカスタム属性でプロジェクトをアップグレードします

関連記事

続きを見る