はじめに
前回記事↓の続きです。
WebVRで、選択すると拡大するオブジェクトを配置する A-Frame連載(2)
A-Frameを使い3D空間に選択できるオブジェクトを配置できたので、選択時に★エフェクトを出してみましょう。
完成図
ソースコード全文
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Web VR Test</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script>
AFRAME.registerComponent('collide', {
init: function() {
this.interactiveAnimations();
this.el.addEventListener('click', this.onClick);
},
interactiveAnimations: function() {
this.el.setAttribute('animation__mouseenter', 'property: scale; to: 1.5 1.5 1.5; startEvents: mouseenter; dur: 200');
this.el.setAttribute('animation__mouseleave', 'property: scale; to: 1 1 1; startEvents: mouseleave; dur: 200');
this.el.setAttribute('animation__click', 'property: scale; to: 3 3 3; startEvents: click; dur:200');
},
onClick: function(e) {
var createEffect = function(point, particleAge) {
var pointStr = point.x + ' ' + point.y + ' ' + point.z;
var effect = document.createElement('a-entity');
effect.setAttribute('position', pointStr);
effect.setAttribute('raycaster', 'enabled: false');
effect.setAttribute('particle-system', 'color: #ff0, #ff9;maxParticleCount: 100;maxAge: ' + (particleAge / 1000) + ';velocityValue:0 -1 0; accelerationValue: 0 0.5 0; duration: 1;');
return effect;
};
var point = e.detail.intersection.point;
var particleAge = 1500;
var effect = createEffect(point, particleAge);
var scene = document.querySelector('a-scene');
scene.appendChild(effect);
setTimeout(function() {
scene.removeChild(effect);
}, particleAge);
}
});
</script>
</head>
<body>
<a-scene>
<a-sky color="#a0d8ef" wireframe="true"></a-sky>
<a-entity cursor="rayOrigin: mouse"></a-entity>
<a-entity laser-controls="hand: right" raycaster="far: 50;"></a-entity>
<a-box position="0 0 -10" width="2" height="1" depth="1.5" color="#333" collide></a-box>
</a-scene>
</body>
</html>
解説
<head>
...
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
...
</head>
ここでA-Frameのparticleコンポーネントを読み込みます。
Githubで使い方が見れます。
https://github.com/IdeaSpaceVR/aframe-particle-system-component
A-Frameはこのように、componentを簡単に追加して使えます。
e.detail.intersection.point
これがマウス／コントローラーで選択した場所の座標です。
その位置にエフェクトを生成しています。
scene.appendChild(effect);
setTimeout(function() {
scene.removeChild(effect);
}, particleAge);
A-Frameのシーンにエフェクトを追加。
そして、エフェクトが消える1.5秒後に、エフェクトをシーンからも削除します。
（削除しなくても見た目上は消えますが、シーン上には残り続けるため）
次回は選択時に音を鳴らしてみます。