ようこそジャパリVRへ！

7037 ワード
WebVR HTML A-Frame MMD VR HTML テキストリンク

これ何？ へぇー、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