More than 3 years have passed since last update.

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

Last updated at 2020-08-06Posted at 2020-07-19

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/aframe-extras@v6.1.0/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>