Help us understand the problem. What is going on with this article?

ようこそジャパリ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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away