はじめに
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/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>
文字を表示する
<a-text position="-0.8 2.8 -3" color="red" value="Merry Christmas!"></a-text>
星をクリックで回転させる
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は楽しい！