A-FrameはHTMLでVRができるフレームワークなんだね！ pic.twitter.com/8nYh557OY1
— jyuko (@jyuko49) 2017年2月23日
これ何？ へぇー、A-Frameっていうんだ！すごーい！HTMLでVRが作れるフレームワークなんだね！
VRゴーグル？っていうのを使うと、立体的に見えるんだ！
<a-sky>に画像のパスを書くだけで、いろんなちほうに行けるんだ！わーい！たーのしー！
VRに使う画像は『equirectangular image』で検索すればいいんだね！
私はサーバル！こっちはボス！schwarzさんが作ったMMDのフレンズだよ！
<a-mmd>でロードされてるんだって！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ジャパリVR</title>
<script src="https://cdn.rawgit.com/aframevr/aframe/v0.5.0/dist/aframe-master.min.js"></script>
<script src="https://cdn.rawgit.com/kripken/ammo.js/dcab07bf0e7f2b4b64c01dc45da846344c8f50be/builds/ammo.js"></script>
<script src="https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.0/build/aframe-outline.min.js"></script>
<script src="https://cdn.rawgit.com/takahirox/a-mmd/v1.0.2/build/a-mmd.min.js"></script>
</head>
<body>
<a-scene antialias="true" outline>
<a-sky src="sm_lotw-041119.jpg"></a-sky>
<a-entity position="0 10 20">
<a-camera></a-camera>
</a-entity>
<a-entity mmd="audio:./nc51622.mp3;">
<a-entity mmd-model="model:./サーバル/サーバルちゃん.pmx; vmd:./日常・非日常モーションセットV104/朝の背伸び.vmd;"></a-entity>
<a-entity mmd-model="model:./BOSS/ラッキービースト.pmx;" position="5 0 0">
<a-animation
attribute="rotation" direction="alternate"
from="0 0 0" to="0 360 0" dur="4000"
repeat="indefinite" easing="ease">
</a-animation>
</a-entity>
</a-entity>
<a-light type="ambient" color="#888"></a-light>
<a-light color="#AAA" distance="100" intensity="0.4" type="point"></a-light>
</a-scene>
</body>
</html>
あとがき
サーバルちゃんのMMDが配布されていると知ってから1時間程で、気付いたら作ってたものです。せっかくなので、**"A-Frameで簡単に実現できること"**の紹介を兼ねて共有してみます。
ライセンスの都合もあり、ファイルやデモページの公開はしていないので、上記のHTMLをコピペし、モデル、モーション、背景画像、音源を配置するなどして、個人で利用ください。
素敵なモデルやフレームワークを作れるフレンズたちのおかげで、たった数十行のHTMLでジャパリパークを疑似体験できるなんて、すごーい！時代になったものですね！
クレジット
ジャパリVRは、以下のOSS、コンテンツを利用しているよ！
モデル、モーションは再配布禁止だよ！ライセンスの範囲内で遊んでね！
A-Frame
https://github.com/aframevr/aframe
A-Frame MMD component
https://github.com/takahirox/a-mmd
けものフレンズ ロゴジェネレータ
http://qiita.com/hiruberuto/items/463219b158d74668e7d9
サーバル
http://3d.nicovideo.jp/works/td28891
ラッキービースト
http://3d.nicovideo.jp/works/td28949
日常・非日常モーションセット
http://www.nicovideo.jp/watch/sm23462394
背景画像
http://www.ignorancia.org/en/index.php?page=LOTW_11_19_04_Panorama