WEBでVRするフレームワーク"A-Frame"を使ってみた
engadget日本版にてWebで簡単にVRコンテンツを作れるというA-Frameが紹介されていて、面白そうなので試しに使ってみました。
engadget日本版：Oculus対応のVRサイトをHTML感覚で作れるフレームワーク「A-Frame」をMozillaが公開
サンデープログラマーなので高望みはせず、とりあえずサンプルソースをそのまま切り貼りレベルでパノラマ写真に3Dモデルを表示するというところまで試してみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frameを使ってみた</title>
<meta name="description" content="test — A-Frame">
<script src="../lib/aframe.js"></script>
</head>
<body>
<a-scene>
<a-sky src="../image/theta001.jpg" rotation="0 0 0"></a-sky>
<a-camera cursor-visible="false" position="0 5 0" rotation="0 70 0"></a-camera>
<a-model src="../model/pepper.dae" position="0 3 4" rotation="0 180 0" scale="1 1 1"></a-model>
<a-model src="../model/pepper.dae" position="0 3 -4" rotation="0 0 0" scale="1 1 1"></a-model>
<a-model src="../model/pepper.dae" position="4 3 0" rotation="0 270 0" scale="1 1 1"></a-model>
<a-model src="../model/pepper.dae" position="-4 3 0" rotation="0 90 0" scale="1 1 1"></a-model>
<a-model src="../model/sculpture.dae" position="0 0 5"></a-model>
</a-scene>
</body>
</html>
パノラマ写真にはROCHO THETAで全天球撮影した写真を加工せずに使いましたが、<a-sky>タグ1つでグリグリ周囲を見回せるようになりました、しかもVR対応。なんと楽ちん！
A-FrameではColladaというファイル形式(拡張子.dae)で書かれた3Dモデルを表示できます。
3D Warehouseというサイトからフリー素材のPepperをダウンロードして使ってみることにしました。
視点カメラを囲むようにパラメータを調整してPepperを並べてみましたが、数字だけだと距離感や実際の向きがイマイチ分からず試行錯誤…
いつかGUIで表示しながら調整できるようになることに期待。
A-Frameを使えば、ユーザがHTML5に対応しているブラウザで閲覧すれば、特別なプラグインソフト無しで3D空間を表現できるところが良いですね。面白いVRコンテンツのアイデアがあれば、A-Frameは役立つかもしれません。
最後に、私がハマった点も記載しておきます。
※どちらもChromeでしか試していません
■ローカルファイルのままブラウザで表示してもモデルが表示できない
私は起動時オプション「--allow-file-access-from-files」を使って、WEBサーバを経由せずにローカルで開発することがあります。
今回も初めはローカルで開発していましたが、モデルを表示することができませんでした。
詳細は調べていませんが、必ずHTTPでデータを取得するような作りになっているのかもしれません。
サンプルソースそのままなのにうまくいかないので戸惑いました…
■.htaccessで制限をかけていると、リロード時にイメージを表示できない
自宅で開発テスト用に立てているWebサーバは.htaccessでアクセス制限をかけています。
この環境だとブラウザでページをリロードすると、画像が401 unauthorizedとなり表示できません。
A-Frameのスクリプトを覗いて調べてみましたが、別にWeb技術もJavaScriptに大して詳しいわけではないので結局何が悪いのか分からず…
キャッシュの仕組みが何か関係しているのだろうか？
仕方ないので画像フォルダのみアクセス制限を外すことで対応しました。