search
LoginSignup
17
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

ようこそジャパリVRへ!

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17
Help us understand the problem. What are the problem?