OpenStreetMap(OSM)の3DマップとA-Frameを使ってWebVRを作ってみた

9770 ワード
A-Frame WebVR OpenStreetMap VR OpenStreetMap テキストリンク

Qiita投稿初心者です。よろしくお願いいたします。

前書き

Google Mapの3Dマップを眺めて
「この3DデータダウンロードしてVRで散策したいなー」
と思ったものの、Google Mapからは3Dデータを取り出せないようなので、代替案を探したところ、OpenStreetMapにたどり着いた次第です。
そして、htmlを数行書くだけでWebVRを構築できるステキなA-Frameを使ってVR空間を作ります。

前提環境

  • OS：Windows 10
  • Webブラウザ：FireFox 55以降 記事中では78.0.2を使用
  • Blender：2.8X 記事中では2.83.2を使用

1. OpenStreetMapから3Dマップデータを取得

https://www.openstreetmap.org/ にアクセスして出力したい範囲を表示後、エクスポートでosmファイルをダウンロードします。

ドラッグして別の領域を選択 から領域を選択することも可能です。

2. 3Dマップデータのファイルフォーマット変換

OpenStreetMapの3Dマップデータであるosmファイルは A-Frame で読み込むことができないため、読み込めるファイルフォーマット、 glTF もしくは OBJ へ変換する必要があります。
ここでは、Blenderとそのアドオンを用いて、 glTF へ変換します。

2.1. Blenderに3Dマップデータを読み込むためのアドオンをインストール

https://gumroad.com/l/blender-osm へアクセスし、アドオンblender-osmをダウンロードします。価格は$0から入力できます。お好きな価格を設定ください。

インストールはzipを解凍せずBlenderのアドオンインストール機能で可能です。

注意点は、 Testing のタブではなく Community のタブの中に入っていることですね。

詳細な手順はこちらの Installation の項目を参照：blender-osmのドキュメント

2.2. Blenderで3Dマップデータを読み込み

まずはデフォルトで表示される立方体を無慈悲に X からの D のショートカットで削除。

N で右側のメニューを開くと縦のタブに osm が見えるので、そこからosmファイルを読み込みます。

詳細な手順はこちらの OpenStreetMap import from a local file の項目を参照：blender-osmのドキュメント

読み込み後のイメージ

この形はまごうことなき東京駅。

2.3. Blenderから3DマップデータをglTFファイルとして出力

glTF ファイルの出力アドオンはBlenderに標準搭載されているため、追加アドオンなしで出力できます。

3. A-Frameで3Dマップデータを取り込み

A-Frameで3Dマップデータを取り込みます。

3.1. htmlコード

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, VR Tokyo Station!</title>
    <!-- aframe-extras requires 0.9.X aframe -->
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <!-- https://github.com/donmccurdy/aframe-extras -->
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
  </head>
  <body>
    <a-scene background="color: #EEEEEE">
      <a-assets>
        <a-asset-item id="map" src="models/map.glb"></a-asset-item>
      </a-assets>

      <!-- light -->
      <a-light color="#FFEEEE" position="-1 1 0"></a-light>

      <!-- objects -->
      <a-entity id="map" 
                position="0 0 0" 
                rotation="0 0 0" 
                gltf-model="models/map.glb" 
                scale="1 1 1" 
                shadow="">
      </a-entity>

      <!-- movement control -->
      <a-entity id="rig"
          movement-controls
          position="0 0 0">
        <a-entity camera
                  position="0 1.6 0"
                  look-controls="pointerLockEnabled: true">
        </a-entity>
      </a-entity>

    </a-scene>
  </body>
</html>

A-Frame本体のみでは、VRでの移動ができないため、aframe-extrasを追加で読み込んでいます。

index.html のフォルダ階層に、 models フォルダを作成し、上記で出力したglTFファイル map.glb を入れています。

3.2. ライセンス

4. VRで散策

いざVRのHMDをかぶって、散策してみましょう。
HMDを持っていない場合は、キーボードとマウスで操作可能です。

4.1. htmlファイルの閲覧の仕方

htmlファイルを直接FireFoxで開こうとすると クロスオリジン要求をブロックしました というエラーで開けないので、ローカルでサーバーを立てるか、NetlifyやGitHub Pagesなどの静的サイトホスティングサービスを使用しましょう。

4.2. VRのHMDでの操作

  1. FireFoxで開くと、吹き出しでVRデバイスのアクセス許可を尋ねられるので VR へのアクセスを許可する を選択

  2. 画面右下のHMDアイコンをクリック

  • 左手のトラックパットで前後左右移動

4.3. キーボードでの操作

FireFoxの画面をクリックすると画面内にマウスカーソルが固定され、操作が可能になります。

  • WASDで前後左右移動
  • マウスでカメラの方向を操作
  • マウスポインターを逃がしたい場合はESCキー

4.4. VRで見た様子

地図データライセンス

© OpenStreetMap contributors

参考