Category: UI/UX

  • Three.jsとは?(環境構築編)

    Three.jsとは?(環境構築編)

    Three.jsとは、Webブラウザ上で3Dグラフィックスを作成するためのJavaScriptライブラリです。Three.jsは、WebGLを基盤としており、WebGLはWebブラウザ上でハードウェアアクセラレーションを利用して3D描画を行うためのAPIです。簡単にいうと、Three.jsを使えば、Webで3Dアニメーションを描画できちゃうよ。というものです。ゲーム開発、AR、VRなどの領域でも活躍できるそうです。今回はThree.jsを触った事がない方向けに、サラッとThree.jsがどのようなものかを理解し、何か作れる記事です。 まずは、three.jsのサンプルを触ってみよう 環境構築するための事前準備 Viteでプロジェクト作成 Viteで最速に環境構築しちゃいます。 自身の作業ディレクトリ内でnpm create vite three-project Vanilla を選択してEnter JavaScript を選択してEnter これでプロジェクトが作成されました。 続いて、 cd three-project で作成したディレクトリ内へ移動し、 npm install でパッケージ達をインストールします。 npm run dev でローカルサーバーを立ち上げます。 画像のような、http://から始まるリンクをコピーしてブラウザで開きましょう。 リンクアクセスして以下のような、Hello Vite!が表示されたら、成功です。 Three.jsをインストール 続いて、Three.jsをプロジェクトにインストールします。 Three.js公式ドキュメントのInstallationに従い、 npm install –save three をターミナルに入力し、Enter これでThree.jsがインストールされます。 サンプルコードを動かしてみる 試しに、main.jsに既存のコードを削除し、Three.jsのREADMEのsampleコードを入力します。 以下のコードに置き換えてください。 保存してブラウザを確認すると、以下のような立体の正方形がぐるぐる回っていたら、正常にThree.jsの読み込みされています。 Join our team！ ご覧いただきありがとうございました。テラドローンではエンジニアを募集しています！一緒にテラドローンで技術のアップデート・社会に役立つプロダクト開発を行っていきたい方ぜひCasual Talk へ気軽にお申し込みください。 次は『Three.js とは?~原理理解編~』 シーン、カメラ、レンダラー、メッシュについて

  • 3D地形と3D都市を表示して富士山と渋谷にドローン飛ばしてみた

    3D地形と3D都市を表示して富士山と渋谷にドローン飛ばしてみた

    こんにちは！ 運航管理開発部の藤井です。 最近UTM(ドローン運航管理システム)サービスの開発でフロントエンドの開発をする機会があり、地図系WebGLで3d terrainと3dモデルを組み合わせて描画できるのかを検証したく今回記事にしてみました。Maplibre-gl-jsのaddProtocolを使用して国土地理院の標高タイルをDEMのラスタータイルに変更したものを描画するような作りにしております。 使用技術, ライブラリ 3D地形の描画と3Dモデルのシミュレーション 具体的な実装は @itouotiさん、@Kanahiroさんの記事が詳しいです。 今回の実装にあたりmaplibre-gl-jsから標高値の取得をおこなっており、Map.transformクラス内のメソッドgetElevationから取得します。 この際デフォルトで450m標高が高く表示される実装になっているため一律で450m下げる必要があります。  API to access thr camara target elevation when using terrain また、terrainのスタイルを適用する時に実標高データをそのまま適用するために標高データに対してどれだけ地形を隆起して表示させるかの倍率を表すexaggerationをデフォルトもしくは1にします。 ドローンのフライトルートについては国土地理院のWeb地図より線形データをgeoJson形式で取得しました。 都心部では平地に高さのある建物が建っています。おおよそドローンは30mから150mの間で飛行することが想定されており、上記だけだと建物への接近状況が可視化できません。 そのため今回はPlateauの3Dモデルをindigoさんがベクタータイルに変換したものを使用して建物の可視化までやってみます。 画面の表示するタイミングで録画を開始しております。ベクターファイルですが思ったより早く描画されているなと感じました！ まとめ ドローンの運行管理をデジタルツインっぽい３Dにする際の主要なものを組み合わせてみましたが、ドローンの実映像と画面上の視界を一致させようとするにはまだDSMの建物や大きいオブジェクトの標高データをどのように取るかの課題があります。 またドローンは高度を変えながら飛行するためそれを画面上に反映する必要もあります。 参照データDEM標高タイル(国土地理院)国土地理院地図Webindigo株式会社さんのMVT形式データセット – 3D都市モデルドローン3Dモデル 参考資料@itouoti – React/mapboxの地図上で3Dモデルを動かす(Qiita )@Kanahiro – maplibre-gl-gsi-terrain(github) MapLibre GL JSと地理院標高タイルで3D地形を表示(Qiita)Maplibre GL JS の addProtocol の使い方を調べる (Qiita) MapLibre（v2.2.0-pre.2.）での3次元表示（Terrain 3D）を試してみる Reactを用いたCesiumの応用 航空レーザ測量の仕組み Join our team！ ご覧いただきありがとうございました。テラドローンではエンジニアを募集しています！一緒にテラドローンで技術のアップデート・社会に役立つプロダクト開発を行っていきたい方ぜひCasual…