今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

【WebVR日記 0】A-Frameで全天球画像(360度写真)を簡単表示!videoはiPhoneで上手く行かない(;;)

こんにちは、ヨドバシカメラでVRゴーグルを1170円でゲットし、

WebVR熱が高まっているちゃんいーです。

 

f:id:sudara_bluse:20171029070746j:plain

 

本記事はA-Frameというスレームワークを使って

、簡単に全天球画像をスマホVRで見る方法です。

 

こちらを参考。

qiita.com

 

1、まずは全天球画像(360度写真)を撮影、またはフリー素材から見つけてきます。

WPanorama - Download panoramic pictures

私はこちらのサイトからGET。おー長い。

f:id:sudara_bluse:20171030101424j:plain

 

3、HTMLを書きます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- ver0.2.0を読み込み -->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>

<body>
        <a-scene>
            <a-sky src="sample-photo.jpg" rotation="0 170 0"></a-sky>
        </a-scene>
    </body>

</html>

 

rotation は すべてのエンティティにあるコンポーネント

roll (x), pitch (y), yaw (z) の 3つを指定することで、

エンティチィの方向を指定できます。

 

 

とありますが、この値の意味、

ロールピッチヨーの概念がわかりません。。すいません。。

とりあえずこのままにしときます。。

 

3、サーバーにアップしてスマホでアクセスします!

 

できた〜簡単!

f:id:sudara_bluse:20171030103007p:plain

 

その後、ドラクエのモンスターたちの横長画像を発見し、

VRで見て感動しました、、、。笑

 

f:id:sudara_bluse:20171030103218j:plain

 

でもやっぱり一番テンション上がったのはDMM.comのあれでしたね。

感動しましたよ。

 

動画の再生は?360度動画再生したい!

ですよねー!

こちらのサンプルとQitaを参考に360度動画の再生もやってみる。

aframe.io

qiita.com

 

ソースは簡単!

 

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> <a-assets>
<video id="video" src="video.mp4" autoplay loop crossorigin="anonymous"></video>
</a-assets>

<a-scene>
<a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
</a-scene>
</body> </html>

 

が、、、、デスクトップPCのブラウザだと問題なく動くんですが、

スマホ(iPhone 8iOS 11)のChromeSafariだと、

 

動画が最初の画面にままで動きません。

これどうすればいいの泣 わかる方教えてください(;;)

ハコスコ的に使いたいので残念です。。

 

あとはモデルデータを取り込んでみたいな!

続く。

 

こちらもどうぞ!

www.sudara-bluse.tokyo

www.sudara-bluse.tokyo