A-Frame v1.0 で クリスマスアニメーション

13984 ワード
Christmas HTML animation WebVR A-Frame HTML テキストリンク

はじめに

A-Frame v1.0 が今週リリースされましたね！
HTMLだけで簡単にWebVRができちゃうっていうあれです。

AFrameについての記事はたくさんありますが、バージョンアップで動かない書き方が多いように思います。
なので、ほぼ公式サイト（ A-Frame 1.0 Document ）を見て作りました。

デモ
https://naughty-nobel-fdd6bb.netlify.com/

HTMLベース

A-Frame 読み込み
地面と背景とライトを配置

<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame X'mas</title>
    <meta name="description" content="X'mas - A-Frame">
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene id="scene" cursor="rayOrigin:mouse">

      <a-entity id="ground"
                geometry="primitive: circle; radius: 5;"
                rotation="-90 0 0"
                material="shader: flat; color: #ECECEC"></a-entity>

      <a-sky color="#00111a"></a-sky>
      <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#fff"></a-light>
    </a-scene>
  </body>
</html>

ツリーを作る

木はコーン型を3つ重ねる
a-cone

<a-entity id="tree">
  <a-cone color="#004d40" radius-bottom="0.5" radius-top="0.01" position="0 1.8 -3" height="0.8"></a-cone>
  <a-cone color="#004d40" radius-bottom="0.6" radius-top="0.05" position="0 1.4 -3" height="0.9"></a-cone>
  <a-cone color="#004d40" radius-bottom="0.65" radius-top="0.05" position="0 1 -3" height="1"></a-cone>
  <a-cylinder color="#663300" height="0.3" radius="0.1" position="0 0.3 -3"></a-cylinder>
</a-entity>

星はBlenderで作成して配置
a-obj-model

<a-assets>
  <a-asset-item id="star-obj" src="./assets/obj/star.obj"></a-asset-item>
  <a-asset-item id="star-mtl" src="./assets/obj/star.mtl"></a-asset-item>
</a-assets>

<a-obj-model scale="0.4 0.4 0.4" position="0 2.3 -3" src="#star-obj" mtl="#star-mtl"></a-obj-model>

雪を降らす

パーティクルコンポーネント

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity particle-system="preset: snow" position="0 0 -10"></a-entity>
    </a-scene>
  </body>
</html>

文字を表示する

a-text

<a-text position="-0.8 2.8 -3" color="red" value="Merry Christmas!"></a-text>

星をクリックで回転させる

Animation

animationコンポーネントで 位置や回転、マテリアルを変えるアニメーションを設定できる(property)
複数アニメーションを作る場合は「__(アンダーバー2つ)」をつなげて指定する(animation_star_rotation)
startEventsを使うことで、クリックやマウスオーバー時に実行させることができる(startEvents:click)

<a-obj-model scale="0.4 0.4 0.4" position="0 2.3 -3" src="#star-obj" mtl="#star-mtl"
  animation__star_rotation="property: rotation; startEvents:click; from: 0 0 0; to: 0 360 0; loop:5;"></a-obj-model>

ツリーをクリックで雪を降らす

さっきは星をクリックして星のアニメーションでしたが、
別オブジェクトのアニメーションを実行する場合は、javascriptで操作できます。

snow を visible=false にしておき、tree のclick-treeでイベントが発生するように設定する。

<a-entity id="snow" visible="false">
  <a-text position="-0.8 2.8 -3" color="red" value="Merry Christmas!"></a-text>
  <a-entity particle-system="preset:snow;" position="0 0 -4"></a-entity>
</a-entity>

<a-entity click-tree>
  <a-cone color="#004d40" radius-bottom="0.5" radius-top="0.01" position="0 1.8 -3" height="0.8"></a-cone>
  <a-cone color="#004d40" radius-bottom="0.6" radius-top="0.05" position="0 1.4 -3" height="0.9"></a-cone>
  <a-cone color="#004d40" radius-bottom="0.65" radius-top="0.05" position="0 1 -3" height="1"></a-cone>
  <a-cylinder color="#663300" height="0.3" radius="0.1" position="0 0.3 -3"></a-cylinder>
</a-entity>

AFRAME.registerComponent('click-tree', {
  init: function () {
    this.el.addEventListener('mousedown', function () {
      document.getElementById('snow').setAttribute('visible', 'true');
    });
  }
});

完成

あとはサンタとか家とか置いて、アニメーションつければ完成！

ほとんどBlenderの力な気もするけど、気軽にWEBVRができるのでA-Frameは楽しい！