はじめに

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

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

方法

MDSドキュメントを使おうと思いましたが、
HTMLがうまく実装できず

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

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

■物体の形

■背景

■色の選択

■プラグイン：夜空の背景を使用するために下記を使用
<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>

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

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

完成

<!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>

詰まった点

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

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

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

おわりに

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

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

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

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

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

Tips

■星を降らせる

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

星を降らせる場合のプラグインは下記の通りです。
これを採用すると<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>