A-Frameを使ってクリスマスっぽいことをする

##はじめに

今回、初めてのアドベントカレンダーに参加します。

ということで
今回は学び始めたA-Frameを使って
クリスマスっぽいことをしようと思います！

##方法

[MDSドキュメント](https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)を使おうと思いましたが、
HTMLがうまく実装できず


下記サイトを参考にしました！

https://aframe.io/

画面左「Hello WebVR」＞画面右上「VIEW SOURCE」＞(少し時間がかかります)画面が表示されたら「view source」を押すと、
ソースコードを取得できます。

■物体の形

https://qiita.com/matsukatsu/items/b1540dbf36da3d58dc80

■背景

https://qiita.com/matsukatsu/items/adec590eddad5510c196


■色の選択

https://www.colordic.org/

■プラグイン：夜空の背景を使用するために下記を使用
`<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>`

`<script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>`

・ターゲットの使用
`<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js">`

■円錐
`<a-cone position="-1 0.5 -3"　color="tomato" radius-bottom="2" radius-top="0.5"></a-cone>`

■円柱
`<a-cylinder position="-1 3.0 -3" color="#583822" height="1.3" radius="0.3"></a-cylinder>`

■正方形
`<a-box position="-1 4.0 -3" color="#ba2636" depth="1.0" height="1.0" width="1.0"></a-box>`

■背景・星を散らせる
`<a-sky color="#001e43"></a-sky>`
`<a-entity star-system></a-entity>`

■ターゲット作成
`<a-camera><a-cursor></a-cursor></a-camera>`

■動的処理：下記サイトを参考

https://codepen.io/ukkz/pen/bGeOGve?editors=1010

　今回は、照準にあたると、「文字の出力」と「色の変更」がされるようにしました。

##完成
```html
<!DOCTYPE html>
<html>

<head>
    <title>Tree</title>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/matthewbryancurtis/aframe-star-system-component/db4f1030/index.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
</head>

<body>
    <a-scene>
        <!-- ツリー本体 -->
        <a-cone position="-1 1.9 -3" color="#2f5d50" radius-bottom="0.5" radius-top="0"
            event-set__enter="_event: mouseenter; _target: #cone-S; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-S; visible: false">
            <a-text id="cone-S" value="Happy" align="center" color="#FFF" visible="false"
                position="2 -0.75 0.55" geometry="primitive: plane; width: 0.75" material="color: #333"></a-text>
        </a-cone>
        <a-cone position="-1 1.3 -3" color="#2f5d50" radius-bottom="0.8" radius-top="0" height="1.5"
            event-set__enter="_event: mouseenter; _target: #cone-M; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-M; visible: false">
            <a-text id="cone-M" value="Merry" align="center" color="#FFF" visible="false"
                position="2 0.0 0.55" geometry="primitive: plane; width: 1.25" material="color: #333"></a-text>
        </a-cone>
        <a-cone position="-1 0.5 -3" color="#2f5d50" radius-bottom="1.1" radius-top="0" height="2.0"
            event-set__enter="_event: mouseenter; _target: #cone-L; visible: true"
            event-set__leave="_event: mouseleave; _target: #cone-L; visible: false">
            <a-text id="cone-L" value="Christmas" align="center" color="#FFF" visible="false"
                position="2 0.75 0.55" geometry="primitive: plane; width: 1.75" material="color: #333"></a-text>
        </a-cone>
        <a-cylinder position="-1 -0.7 -3" color="#583822" height="2.5" radius="0.3"></a-cylinder>
        <a-box position="-1 -2.1 -3" color="#ba2636" depth="1.0" height="1.0" width="1.0"
               event-set__enter="_event: mouseenter; color: yellow"
               event-set__leave="_event: mouseleave; color: #ba2636">
               <a-animation attribute="visible" dur="2000" to="false" repeat="indefinite"></a-animation>
        </a-box>

        <!-- 背景と星 -->
        <a-sky color="#001e43"></a-sky>
        <a-entity star-system></a-entity>
        <a-camera>
            <a-cursor></a-cursor>
        </a-camera>
    </a-scene>
</body>

</html>
```

![スクリーンショット 2021-12-03 16.37.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1622645/801240f7-4822-376a-8fd2-bc273e66c7eb.png)

##詰まった点
・プラグインしたバージョンの問題で
　背景の実装に時間がかかりました。
　
https://www.npmjs.com/package/aframe-particle-system-component

これを参考に
`npm i aframe-star-system-component`をターミナルで実行。


上記サイトに記載されているものは
古いバージョンでないと反応しませんでした。

##おわりに
クリスマスツリーは賑やかですが
出し入れが面倒と感じる場合もありますよね

そんなときに役立つのではないでしょうか。

いまは少し味気ないクリスマスツリーです。

みんなでわいわい飾りつけしましょ。笑

是非`Fork`して飾り付けてみてください！

https://codepen.io/tomosukesan/pen/yLzNQRr


##Tips
■星を降らせる

https://qiita.com/matsukatsu/items/adec590eddad5510c196

めちゃめちゃ映えるけど
めちゃめちゃ重いため、今回は実装しませんでした。

星を降らせる場合のプラグインは下記の通りです。
これを採用すると`<a-box>`タグや`<a-text>`タグが反映されていませんでした...

`<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>`
`<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>`