webARでオブジェクトをタップした後、連続して処理が走ってしまう
・webARで箱をタップしたら、箱の回転はするのですが、タップ処理がずっと走ってしまい箱が回転し続けてしまいます。
タップした時だけ箱を回転させたいのですがどうすればよろしいのでしょうか？
<!doctype HTML>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>webAR</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<!-- A-Frame のパーティクルシステム -->
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<!-- aframe-extras読み込み -->
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script>
AFRAME.registerComponent('collide', {
init: function() {
this.interactiveAnimations();
this.el.addEventListener('click', this.onClick);
},
interactiveAnimations: function() {
this.el.setAttribute('animation__click', 'property:rotation; from:0 0 0; to: 0 360 0; startEvents: click; dur:500');
},
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', 'preset: defolt; texture: /images/eventer/like.png; 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>
<body>
<!-- A-FrameStart -->
<a-scene embedded arjs="debugUIEnabled:false;trackingMethod:best;" vr-mode-ui="enabled: false">
<a-marker preset="hiro">
<a-entity cursor="rayOrigin: mouse"></a-entity>
<!-- boxのテンプレート -->
<a-box depth="1" height="1" width="1" position="0 0 0" collide>
</a-box>
</a-marker>
<!-- カメラ起動 -->
<a-entity camera></a-entity>
</a-scene>
<!-- A-FrameEnd -->
</body>
</html>