スマホでも見れる360度画像をやってみた話

VRがアツい

VR(Virtual Reality- 仮想現実)がいろいろと話題になっています。

 

VRとは、人間の感覚器官に働きかけ、現実ではないが実質的に現実のように感じられる環境を人工的に作り出す技術の総称。 身体に装着する機器や、コンピュータにより合成した映像・音響などの効果により、3次元空間内に利用者の身体を投影し、空間への没入感(immersion)を生じさせるhttp://e-words.jp/w/VR.html より

 

今年はプレイステーションのVRも発売されるということで、これまで以上に注目されるんじゃないかなと思っています。

スマホでもVRを体感することができますね。

 

ただし、PCでもスマホでも、VRをちゃんと体感しようと思ったらVRゴーグルが必要だったりします。そんなゴーグルをみんなが持っているわけないですし、手軽にそういった体感をユーザーにもたらしたい場合、Thetaなどで360度動画を撮ってYouTubeなどで再生させるのが一番簡単ではあります。

 

しかしYouTubeの360度動画は、PCで閲覧する際にブラウザに制限があるほか、スマホではYouTubeアプリから再生しなければなりません。もしどこかの企業などがユーザーに360度動画を見せたいとしても、ユーザーがアプリをダウンロードしている保証はありませんし、わざわざアプリをインストールしてもらうのはなかなか大変です。

 

Javascriptで360度パノラマ画像を表示させる

 

先ほども出てきましたThetaで撮影した画像はこんな感じです。

house_pano

 

そのまま掲載するとよくわかんないですね。

これをJavascriptなどでいい感じにやると、PCでもスマホでも360度で表示させることができます。

しかも指で操作ができます。

デモはこちらからご覧いただけます。

 

demo

 

これをARなどでサクッと再生させれば、不動産やハウスメーカーさんの商品紹介などに役立つかもですね。

 

 

 

 

 

 

 

 

 

 

About the author

Kazuhito Naozuka Representative Director / Web Director / Programmer

Based in Saga City, supporting web strategy for small and medium-sized businesses and sole proprietors. Handling everything from website creation to SaaS development, SEO optimization, and ad management across the digital domain. Our mission is to accelerate the growth of regional businesses through "technical expertise × strategic proposals." We have been involved in numerous projects to date.