LoginSignup
14

More than 3 years have passed since last update.

A-Frame を使ってみた

Last updated at Posted at 2019-06-02

はじめに

お手軽にVR表現ができるとのことで使ってみました。
何か動きがあるものを表示してみようと思います。

準備

"aframe.min.js" を読み込む。

sample_AFrame.html
<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cylinder position="0 0.5 -3" radius="0.5" height="1.0" color="#88005D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#000000"></a-sky>
    </a-scene>
  </body>
</html>

sample_VR.jpg
マウスでぐりぐり動かせます。

他にもboxやsphereなどが使えます。
<a-box></a-box>
<a-sphere></a-sphere>

動きがあるもの

"aframe-particle-system-component" を読み込むと、
particleを降らす事が出来ます。

<a-entity position="6 2.5 6" particle-system="preset:star; color: #919130,#916100"></a-entity>
preset:starに設定して、Cylinderから噴出している様に設置し、加えて雰囲気を出すためTextureを設定しました。

sample_AFrame2.html
<html>
  <head>
    <meta charset="utf-8">
    <title>beer</title>
    <meta name="description" content="Hello, WebVR! • A-Frame">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script> 
  </head>
  <body>
    <a-scene>
      <a-assets>
      <img id="beer" src="https://cdn.glitch.com/f4cd694e-d69b-416b-ad55-05079f83a879%2Fbeer.jpg">
      <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>

      <a-entity position="6 2.5 6" particle-system="preset:star; color: #919130,#916100"></a-entity>
      <a-cylinder src="#beer" position="6 2.5 6" rotation="0 0 0" radius="0.5" height="1.5"></a-cylinder>
      <a-sky src="#skyTexture"></a-sky>
      <a-entity position="2 0 1">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>

sample_VR2.gif

あふれ出るビールが夜空に映えています。

リンク

以下参考にさせて頂きました。
ありがとうございました。

・A-Frameでいろいろ降らせる
https://qiita.com/idontwannawork/items/1ef2e1470d27ed522e11

・A FRAMEの使い方
https://github.com/katsube/neec2017A/wiki/A-FRAME%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9#%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3

・HTMLを書くだけで誰でも簡単!A-FrameではじめるWeb AR/VR
https://www.slideshare.net/ssuserc0d7fb/htmlaframeweb-arvr

・Glitch
https://glitch.com/

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
  3. You can use dark theme
What you can do with signing up
14