30分で作る360度動画プレイヤー

様々な表現が可能なGrimoire.jsでは360度画像なども簡単に表示することができます。そこで今回はElectronと組み合わせて簡易360度動画プレイヤーを作りました。

##　360度動画の表示

Grimoire.jsでは３６０度動画の表示も簡単にできます！

この機能とElectronを用いてアプリケーションを作りましょう！

Electronについて

HTMLとjavascriptを用いてデスクトップアプリケーションを制作できます。
Electronについては以下の記事を参考にしました。
http://qiita.com/Quramy/items/a4be32769366cfe55778

実際にElectronでは基本的なアプリケーションの開始、終了の記述しかしていません。
Grimoire.jsで360度動画を全画面に表示してそれをそのままデスクトップアプリケーションにしました。gomlは以下のようになります。

<goml width="fit" height="fit" containerId="drop-zone">
    <import-material typeName="skybox" src="index.sort" />
    <material id="skybox" type="skybox" texture="video(./sample.mp4)" />
    <scene>
        <camera/>
        <mesh class="geo" scale="50" geometry="sphere" material="#skybox" />
    </scene>
</goml>

GOMLは基本的に360度動画を表示するためにsphereジオメトリーをsceneに配置しただけです。一応これだけの記述で360度動画を読み込むことができるようになります。texture属性にはvideo(動画のパス)と記述しましょう。

閲覧する360度動画を変更できるようにjavascriptを記述します。またマウスホイールで回転できる機能を追加しました。

! function() {
    let i = 0;
    gr(function() {
        setInterval(function() {
            gr("#main")(".geo").setAttribute("rotation", "y(" + i / 5 + "d)");
            i++;
        }, 10);

        function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            var file = evt.dataTransfer.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                console.log(e.target.result)
                gr("#main")("material").setAttribute("texture", "video(" + e.target.result + ")");
            };
            reader.readAsDataURL(file);
        }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        var dropZone = document.getElementById('drop-zone');
        dropZone.addEventListener('dragover', handleDragOver, false);
        dropZone.addEventListener('drop', handleFileSelect, false);
        document.addEventListener('mousewheel', mousewheel, false);
        const camera = gr("#main")("camera").get();
        let num = 0;

        function mousewheel(e) {
            let posY = camera.getAttribute("rotation").Y;
            num += e.deltaY / 100;
            camera.setAttribute("rotation", `0,${posY + num},0`);
        }
    });
}();

javascript側ではドラッグアンドドロップのイベントの登録、またその際に動画をGrimoire.jsのAPIを使用して、meshのtexture属性を変更しています。

基本的にはGrimoire.jsの記述はこれだけです。360度動画プレイヤーも簡単に制作することができました。

まとめ

Electronを使いGrimoire.jsを組み合わせて簡単に360度画像プレイヤーを制作することができました。もっと機能を追加すれば実用に耐えうるものになってくると思います。