Edited at

ようこそジャパリVRへ!

More than 1 year has passed since last update.

japari_logo.png

IMG_1499.jpg

IMG_1498.jpg

これ何? へぇー、A-Frameっていうんだ!すごーい!HTMLでVRが作れるフレームワークなんだね!

VRゴーグル?っていうのを使うと、立体的に見えるんだ!

<a-sky>に画像のパスを書くだけで、いろんなちほうに行けるんだ!わーい!たーのしー!

VRに使う画像は『equirectangular image』で検索すればいいんだね!

私はサーバル!こっちはボス!schwarzさんが作ったMMDのフレンズだよ!

<a-mmd>でロードされてるんだって!


index.html

<!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

BGM

http://commons.nicovideo.jp/material/nc51622