はじめに
前回記事↓の続きです。
WebVRで、選択すると★エフェクトが出るオブジェクトを配置する A-Frame連載(3)
A-Frameを使い3D空間に選択できるオブジェクトを配置し★エフェクトを出したので、音を出してみましょう。
完成図
※前回と同じ動画です。
※上の完成図はアニメーションGIFなので音は出ません。
※A-Frameの仕様上、ローカルだと画像や音を読み込めないです。そのため、ローカルで動かしている完成図は実際音は出ていないです。
ソースコード全文
<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;');
effect.setAttribute('sound', 'src: #decision; autoplay: true');
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-assets>
<audio src="./decision.mp3" id="decision"></audio>
</a-assets>
<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>
解説
onClick: function(e) {
...
effect.setAttribute('sound', 'src: #decision; autoplay: true');
...
};
sound属性を入れてエフェクトを生成しているので、エフェクトと同座標から音が出ています。
A-Frameの凄いところは、こんな感じにオブジェクトにsound属性を入れると座標を考慮した音が出るところでしょうか。
<a-assets>
<audio src="./decision.mp3" id="decision"></audio>
</a-assets>
a-assetsの中にimgやaudioタグを入れておくことで、ページ内で使うリソースを先行して読み込み（プリロード）します。するとページ内でそれらリソースを使う際にリクエストが走らず、即テクスチャや音が反映されます。
（audioのid"decision"と、js内の"src: #decision"がリンクをしています）
以上です。
A-Frame何度か連載続けてきましたが、当初書きたかったところはほぼ書けたので一旦終わります。
来週からはバックエンドをネタに定期投稿していく予定です。