はじめに
今回、初めてのアドベントカレンダーに参加します。
ということで
今回は学び始めた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>