0. 自己紹介
ハイサイ！プロトデータセンターの新卒の伊禮(IREI)です。
普段はUnityでVR開発をしています。
会社ではEラーニングで研修を受けております。
主に使用してきた魔法言語はObjective-C, Swift, C#(Unity)となります。
ブログを書くのは初めてなので何卒お手柔らかにお願い致します。
今回の記事では「A-frameで簡単にPDC社内見学」について2部構成に分けた内の前編をご紹介します。
1. A-FRAMEの概要
A-FrameはWeb上で3Dの作成やバーチャルリアリティ(以下VR)を体験できるオープンソースのフレームワークです。
このフレームワークはMozVR(Mozilla VRチーム)によってリリースされました。
aframe.io
HTMLのマークアップ形式で簡単にVRに対応したWebサイトの作成が可能となります。
作成したサイトはPC、HMD(Head Mounted Display)のOculus RiftやHTC Vive、
そしてスマートフォンで体験することが出来ます。
では実際にA-frameを使用したデモを体験してみましょう！
PCではマウスのドラッグでカメラの向きを左右上下に変更できます。
スマートフォンの場合は、スマートフォンの傾きでカメラの向きが変わり、
更に右下に表示されているゴーグルの様なアイコンをタップすると、左右に2分割されたVR表示に切り替わります。
デモをクリック！
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
(現実へ)お帰りなさい！
今体験して頂いたのは、沖縄県宜野湾市に位置する株式会社プロトデータセンター前の360度写真です。
先ほどのデモのコードは以下となります。
<html> <head> <title>Hello, VR World!</title> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky src="https://dl.dropboxusercontent.com/u/109266226/p/R0010022.JPG"></a-sky> </a-scene> </body> </html>
最初にA-Frameを読み込む必要があります。
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
あとはa- で始まるタグでマークアップしていきます。
今回使用したタグはa-sceneタグとa-skyタグだけです(笑)
a-sceneタグはVR空間のシーンを作成します。
a-skyタグはa-sceneタグで作成したシーンに背景を追加したり、360度の写真を表示させます。
基本的な使い方は下記のように使用したい360度の写真をsrcに指定するだけです。
<a-sky src="https://dl.dropboxusercontent.com/u/109266226/p/R0010022.JPG"></a-sky>
デモではDropboxのPublicフォルダに360度の写真のパスを指定しています。
DropboxのPublicフォルダに360度の写真を格納して、その写真の公開リンクをa-skyタグのsrcに指定していますが、
他の方法としてはサーバーを立てて360度の写真を格納し、そのパスをa-skyタグのsrcに指定する必要があります。
デスクトップや、ローカルフォルダに格納した360度の写真のパスを指定した場合は下記のようにエラーとなりますので注意が必要です。
Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.
以上で「A-frameで簡単にPDC社内見学WebVR」の前編となります。
同じものをUnityで一から作る作業量と比べたらあまりに簡単すぎて最初は驚きました...
次回の後編では画面遷移方法を紹介します。
画面遷移が可能になるとGoogle MapsのStreet Viewのように移動が可能に...
ここまで読んで下さりありがとうございました！