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

# はじめに

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

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

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

# HTMLベース

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

``` html
<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](https://aframe.io/docs/1.0.0/primitives/a-cone.htm)

```html
<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](https://aframe.io/docs/1.0.0/primitives/a-obj-model.html)

```html
<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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536619/c75311c8-9e7b-bdda-a5a5-37ca3afd6e33.png)


# 雪を降らす
[パーティクルコンポーネント](https://aframe.io/docs/1.0.0/introduction/entity-component-system.html#including-the-component-js-file)

```html
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.9/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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536619/9c7037ee-82b9-2505-ed6b-66dba3bfc89d.png)

# 文字を表示する
[a-text](https://aframe.io/docs/1.0.0/primitives/a-text.html)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536619/a7be6a84-a00c-24a5-ad26-6c2c35bf3bde.png)

# 星をクリックで回転させる
[Animation](https://aframe.io/docs/1.0.0/components/animation.html)

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

```html
<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でイベントが発生するように設定する。

```html
<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>
```

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

# 完成

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

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

![3f7ms-9444r.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536619/25f3be85-a38f-3cf2-dc92-ae572a47ece1.gif)

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