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

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

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

# 前提環境
* OS：Windows 10
* Webブラウザ：FireFox 55以降 記事中では78.0.2を使用
* Blender：2.8X 記事中では2.83.2を使用

# 1. OpenStreetMapから3Dマップデータを取得
https://www.openstreetmap.org/ にアクセスして出力したい範囲を表示後、エクスポートでosmファイルをダウンロードします。
![OpenStreatMapエクスポート.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/e8b069ad-6de1-7447-1b11-89866c9194ae.png)
`ドラッグして別の領域を選択` から領域を選択することも可能です。

# 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のアドオンインストール機能で可能です。
![Blenderアドオン設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/0ce57973-06f2-a0c4-af07-2948da03cdfe.png)
注意点は、 `Testing` のタブではなく `Community` のタブの中に入っていることですね。

詳細な手順はこちらの `Installation` の項目を参照：[blender-osmのドキュメント](https://github.com/vvoovv/blender-osm/wiki/Documentation)

## 2.2. Blenderで3Dマップデータを読み込み
まずはデフォルトで表示される立方体を無慈悲に `X` からの `D` のショートカットで削除。
![Blender立方体削除.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/14db2d38-6357-c122-8bee-ef2d78de97c6.png)

`N` で右側のメニューを開くと縦のタブに `osm` が見えるので、そこからosmファイルを読み込みます。
![Blender_Nメニューosm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/1afa4a25-9a30-7729-85ec-6856e5c6cb89.png)


詳細な手順はこちらの `OpenStreetMap import from a local file` の項目を参照：[blender-osmのドキュメント](https://github.com/vvoovv/blender-osm/wiki/Documentation)

読み込み後のイメージ
![Blender_osm読み込み後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/202d39e5-92a8-706e-574c-cbeb06c90a91.png)
この形はまごうことなき東京駅。

## 2.3. Blenderから3DマップデータをglTFファイルとして出力
`glTF` ファイルの出力アドオンはBlenderに標準搭載されているため、追加アドオンなしで出力できます。
![Blender_glTFエクスポート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/0ffde372-dc31-eddf-5bb9-39dec72a501f.png)


# 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>
```

A-Frame本体のみでは、VRでの移動ができないため、[aframe-extras](https://github.com/donmccurdy/aframe-extras)を追加で読み込んでいます。 

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

## 3.2. ライセンス
* A-Frame：[The MIT License Copyright © 2015-2017 A-Frame authors.](https://github.com/aframevr/aframe/blob/master/LICENSE)
* aframe-extras：[The MIT License (MIT) Copyright (c) 2016 Don McCurdy](https://github.com/donmccurdy/aframe-extras/blob/master/LICENSE)

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

## 4.1. htmlファイルの閲覧の仕方
htmlファイルを直接FireFoxで開こうとすると `クロスオリジン要求をブロックしました` というエラーで開けないので、ローカルでサーバーを立てるか、[Netlify](https://www.netlify.com/)や[GitHub Pages](https://pages.github.com/)などの静的サイトホスティングサービスを使用しましょう。

## 4.2. VRのHMDでの操作

1. FireFoxで開くと、吹き出しでVRデバイスのアクセス許可を尋ねられるので `VR へのアクセスを許可する` を選択
![ブラウザ_VRアクセス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/6799609f-2aeb-596d-ccbb-df460b486ae5.png)

2. 画面右下のHMDアイコンをクリック
![ブラウザ_VRアクセス2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/6d859941-0751-ceac-47a9-2c31b7e712e8.png)

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

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

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

## 4.4. VRで見た様子
![VR散策.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/634d387e-737c-0a3e-c4aa-a461309b8b46.gif)

# 地図データライセンス
© [OpenStreetMap](https://www.openstreetmap.org/copyright) contributors

# 参考
* https://aframe.io/docs/0.9.0/introduction/