集合住宅の内部をストリートビューにしてみた

概要

360度写真をWeb上で表示できるA-frameというライブラリと、Canvas内を操作するKonvaを組み合わせて、技術実験で親戚の経営するシェアハウスの内部を360度写真で撮影し、グーグルマップのストリートビューっぽくしました。PCとスマホの両方で見れます（VRゴーグルは対応中）。現状簡単に解説しますが、後々サンプルや動画とかを用意する予定です。

パークサイドハウス吉祥寺|内覧
https://guesthousetokyo.info/view360/

各エリアの矢印や丸のアイコンで隣接するエリアに移動したり、一覧やマップからジャンプすることが可能です。

ここでは簡単にやり方と注意点をまとめておきます。

やり方

1. 360度カメラを買います。
2. 撮影するポイントを決めます。隣接するエリアを考えるとやりやすいです。
3. マップを作成します。（この2と3を最初に考えなかったので、今回のマップは若干歪になっていますorz）

4. 撮影を行います。可能なら360度カメラを全て同じ方角に向けてから撮影すると後々楽です。（これをやってなかったばかりに、後々画像の初期表示角度を全て調整するハメになりましたorz）

5. v1.0.0以降のa-frame.jsを入手します。
   https://aframe.io/

6. 下記のコードを用意します。

    <a-scene>
        <a-sky id="sky"></a-sky>
        <a-entity raycaster="objects: .ui" cursor="rayOrigin:mouse"></a-entity>
        <a-entity rotation="0 0 0" id="rotator">
            <a-entity camera position="0 0 0" look-controls></a-entity>
        </a-entity>
        <a-image src="./icon/arrow.png" rotation="0 0 0" position="0 0 0" id="arrow1" class="ui" visible="false"></a-image>
    </a-scene>

詳しくはa-frameの公式ドキュメントを読んでいただきたいのですが、簡単に説明するとa-skyというのが空間の背景になりまして、ここに360度写真が載ります。まあ簡単に言うとこのアプリはエリア移動操作に合わせて背景画像の写真を切り替えているだけなのです。

a-entity(raycaster)は視点を自由に回したりクリックやタップでインタラクションを起こすために必要な物です。もう一つのa-entity(id="rotator")はカメラの土台です。内包されているcameraのlook-controlsが有効になると角度をスクリプトで操作できないので、土台を用意してそれの角度を変えている感じです。

最後のa-imageはエリア移動用のボタンです。これは矢印の画像を使っていますが、別に立方体でも構いません。

サンプルや動画が出来たらもっと解説を充実させます・・・。

おまけ

もしこちらのマンション（吉祥寺、井の頭公園近く）に住みたい方が居たらこちらのサイトからご連絡ください。
https://guesthousetokyo.info/
月49000円で設備男女別、初月半額だそうです。