A-frameで簡単にPDC社内見学(後編) - プロトソリューションエンジニアブログ

後編

0. 画面遷移方法

新卒のIREIです。

今回は弊社内部の様子を少しだけ見ていきましょう！
次のデモでは画面中央の青いサークルをGoogle Mapのピンのような画像に合わせると、
360度写真が切り替わるのでプロトデータセンター社内(第2ビル)を移動してみて下さい。
デモはこちら
.
.
.
.
.
.
.
.
.
.
.
.
(現実へ再び)お帰りなさい！
いかがだったでしょうか？
まるで本当に社内見学をしたかのような体験が出来たかと思います。

VR最高！！

では早速、今回のデモのコードを見ていきましょう！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haisai, PDC360!</title>
        <meta name="description" content="Hello, World! • A-Frame">
        <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
        <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
        <link rel="stylesheet" href="pdc.css" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <a-scene>
            <a-image   id="path0"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="-5 -1 -10"
                 rotation="180 0 180"
                  visible="true">
            </a-image>
            <a-image   id="text0"
                 position="-6.5 -0.3 -10"
                 rotation="0 0 0"
                  visible="true"
                  text="text: entrance"
                  color="white"
                  z-index="1000">
            </a-image>
            <a-image   id="path1"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="4 4 -15"
                 rotation="0 0 0"
                  visible="false">
            </a-image>
            <a-image   id="path1_1"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="5 0 10"
                 rotation="0 0 0"
                  visible="false">
            </a-image>
            <a-image   id="path1_2"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="-8 0 14"
                 rotation="0 0 0"
                  visible="false">
            </a-image>
            <a-image   id="text1"
                 position="-14 9 -8"
                 rotation="10 10 -5"
                  visible="false"
                  text="text: refresh room"
                  color="black"
                  z-index="1000">
            </a-image>
            <a-image   id="text1_1"
                 position="-7.9 5.3 -8"
                 rotation="10 10 -5"
                  visible="false"
                  color="178 184 170"
                  z-index="1000">
            </a-image>
            <a-image   id="path2"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                   position="-12 8 -8"
                   rotation="0 0 0"
                  visible="false">
            </a-image>
            <a-image   id="path2_1"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                   position="0 0 0"
                   rotation="0 90 0"
                  visible="false">
            </a-image>
            <a-image   id="path3"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="14 3 -3"
                 rotation="0　90　0"
                  visible="false">
            </a-image>
            <a-image   id="path3_1"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="-5 0 10"
                 rotation="0 120 0"
                  visible="false">
            </a-image>
            <a-image   id="path4"
                      src="https://dl.dropboxusercontent.com/u/109266226/p/path.png"
                 position="-1.7 0.8 20"
                 rotation="0 0 0"
                  visible="false">
            </a-image>
            <a-image   id="text2"
                 position="20 4.5 -7"
                 rotation="-10 -60 -5"
                  visible="false"
                  text="text: rooftop"
                  color="black"
                  z-index="1000">
            </a-image>


            <a-sky id="pdc0"  visible="true"  src="https://dl.dropboxusercontent.com/u/109266226/p/R0010453.JPG" rotation="0 -130 0"></a-sky>
            <a-sky id="pdc1"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010456.JPG" rotation="0 -130 0"></a-sky>
            <a-sky id="pdc2"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010461.JPG" rotation="0 -130 0"></a-sky>
            <a-sky id="pdc3"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010457.JPG" rotation="0 -130 0"></a-sky>
            <a-sky id="pdc4"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010459.JPG" rotation="0 -130 0"></a-sky>

            <a-entity position="0 2.2 4">
                <a-entity camera look-controls wasd-controls rotation="0 0 0">
                    <a-entity position="0 0 -3"
                              geometry="primitive: ring; radiusOuter: 0.30; radiusInner: 0.20;"
                              material="color: cyan; shader: flat"
                                cursor="maxDistance: 30; fuse: true; timeout: 1500">
                                <a-animation begin="fusing" easing="ease-in" attribute="scale"fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
                                <!-- <a-entity text="text: What's up" position="0 0 0"></a-entity> -->
                    </a-entity>
                </a-entity>

            </a-entity>
        </a-scene>
        <script>
            var pdc0 = document.querySelector('#pdc0');
            var pdc1 = document.querySelector('#pdc1');
            var pdc2 = document.querySelector('#pdc2');
            var pdc3 = document.querySelector('#pdc3');
            var pdc4 = document.querySelector('#pdc4');

            var path0 = document.querySelector("#path0");
            var path1 = document.querySelector("#path1");
            var path1_1 = document.querySelector("#path1_1");
            var path1_2 = document.querySelector("#path1_2");
            var path2 = document.querySelector("#path2");
            var path2_1 = document.querySelector("#path2_1");
            var path3 = document.querySelector("#path3");
            var path3_1 = document.querySelector("#path3_1");
            var path4 = document.querySelector("#path4");

            var text0 = document.querySelector("#text0");
            var text1 = document.querySelector("#text1");
            var text1_1 = document.querySelector("#text1_1");
            var text2 = document.querySelector("#text2");

            document.querySelector('#path0').addEventListener('click', function() {
                pdc0.setAttribute('visible', 'false');
                path0.setAttribute('visible', 'false');
                text0.setAttribute('visible', 'false');
                pdc1.setAttribute('visible', 'true');
                path1.setAttribute('visible', 'true');
                path1_1.setAttribute('visible', 'true');
                path2.setAttribute('visible', 'true');
                text1.setAttribute('visible', 'true');
                text1_1.setAttribute('visible', 'true');
            });
            document.querySelector('#path1').addEventListener('click', function() {
                pdc1.setAttribute('visible', 'false');
                path1.setAttribute('visible', 'false');
                path1_1.setAttribute('visible', 'false');
                path2.setAttribute('visible', 'false');
                pdc2.setAttribute('visible', 'true');
                path2_1.setAttribute('visible', 'true');
                path1_2.setAttribute('visible', 'true');
                text1.setAttribute('visible', 'false');
                text1_1.setAttribute('visible', 'false');
            });
            document.querySelector('#path1_1').addEventListener('click', function() {
                pdc1.setAttribute('visible', 'false');
                path1.setAttribute('visible', 'false');
                path2.setAttribute('visible', 'false');
                path1_1.setAttribute('visible', 'false');
                pdc0.setAttribute('visible', 'true');
                path0.setAttribute('visible', 'true');
                // text1.setAttribute('visible', 'true');
                // text1_1.setAttribute('visible', 'true');
            });
            document.querySelector('#path1_2').addEventListener('click', function() {
                path1_2.setAttribute('visible', 'false');
                pdc2.setAttribute('visible', 'false');
                pdc0.setAttribute('visible', 'false');
                path0.setAttribute('visible', 'false');
                pdc1.setAttribute('visible', 'true');
                path1.setAttribute('visible', 'true');
                path1_1.setAttribute('visible', 'true');
                path2.setAttribute('visible', 'true');
                // text1.setAttribute('visible', 'false');
                text1.setAttribute('visible', 'true');
                text1_1.setAttribute('visible', 'true');

            });
            // refresh room
            document.querySelector('#path2').addEventListener('click', function() {
                text1.setAttribute('visible', 'false');
                path1.setAttribute('visible', 'false');
                path1_1.setAttribute('visible', 'false');
                path1_2.setAttribute('visible', 'false');
                path2.setAttribute('visible', 'false');
                pdc3.setAttribute('visible', 'true');
                path3.setAttribute('visible', 'true');
                path3_1.setAttribute('visible', 'true');
                text2.setAttribute('visible', 'true');
            });
            document.querySelector('#path2_1').addEventListener('click', function() {
                pdc2.setAttribute('visible', 'false');
                path2_1.setAttribute('visible', 'false');
                pdc1.setAttribute('visible', 'true');
                path1.setAttribute('visible', 'true');
                path2.setAttribute('visible', 'true');
            });
            document.querySelector('#path3').addEventListener('click', function() {
                pdc3.setAttribute('visible', 'false');
                path3.setAttribute('visible', 'false');
                pdc1.setAttribute('visible', 'false');
                path3_1.setAttribute('visible', 'false');
                pdc4.setAttribute('visible', 'true');
                path4.setAttribute('visible', 'true');
                text2.setAttribute('visible', 'false');
            });
            document.querySelector('#path3_1').addEventListener('click', function() {
                pdc3.setAttribute('visible', 'false');
                path3.setAttribute('visible', 'false');
                path3_1.setAttribute('visible', 'false');
                pdc1.setAttribute('visible', 'true');
                path1.setAttribute('visible', 'true');
                path1_1.setAttribute('visible', 'true');
                path2.setAttribute('visible', 'true');

            });
            document.querySelector('#path4').addEventListener('click', function() {
                pdc4.setAttribute('visible', 'false');
                path4.setAttribute('visible', 'false');
                pdc3.setAttribute('visible', 'true');
                path3.setAttribute('visible', 'true');
                path3_1.setAttribute('visible', 'true');
            });
        </script>
    </body>
</html>

画面中心に表示されている青いサークルと赤いピン画像を数秒間合わせると、
クリックイベントとしてイベントを発行し、別の360度写真を表示させています。
この時、遷移先の360度写真をvisible=“true”として表示させ、遷移元の360度写真を非表示にさせるために
visible=“false”にしています。

下記のコードはユーザに対して最初に表示させる360度写真なので、visible=“true”としています。

<a-sky id="pdc0"  visible="true"  src="https://dl.dropboxusercontent.com/u/109266226/p/R0010453.JPG" rotation="0 -130 0"></a-sky>

このコードの下に今回のデモに使用した他の360度写真を格納するため、
idを個別に設定し、visibleをfalseにしてsrcに各360度写真のパスを設定しています。

<a-sky id="pdc1"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010456.JPG" rotation="0 -130 0"></a-sky>
<a-sky id="pdc2"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010461.JPG" rotation="0 -130 0"></a-sky>
<a-sky id="pdc3"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010457.JPG" rotation="0 -130 0"></a-sky>
<a-sky id="pdc4"  visible="false" src="https://dl.dropboxusercontent.com/u/109266226/p/R0010459.JPG" rotation="0 -130 0"></a-sky>

1. まとめ
プロのWeb開発者であれば無駄の多いコードに見えると思いますが、
Web開発初心者でもなんとか動くものを作れました！もっとムダのない書き方があればぜひご教授下さいm(__)m
改めてA-frameってすごいですね。

ただ、
スマートフォンとタブレットでA-Frameで作成したサイトを指でカメラの向きを切り替えられるのは、
現在のバージョンでは横方向のみで上下の切り替えは出来ません(2016/07/15時点)。

今後のアップデートに期待です♪