A-Frame ではいわゆるクリック(カーソルクリック)は目線を合わせてポチみたいな形式であり、普通に書くとデスクトップブラウザでマウスをクリックしても反応しません。なんとかできないかと調べたら公式ドキュメントに書いてました。
https://aframe.io/docs/0.9.0/components/cursor.html のこれ↓です。
Where the intersection ray is cast from (i.e.,entity or mouse). rayOrigin: mouse is extremely useful for VR development on a mouse and keyboard.
動くやつ作ってみました→ https://jsfiddle.net/vmtgw07h/ (○でカーソルが表示されてますが、それと全く関係なくboxをマウスクリックすると色が変わります)
ソースコード↓
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('cursor-listener', {
init: function () {
var lastIndex = -1;
var COLORS = ['red', 'green', 'blue'];
this.el.addEventListener('click', function (evt) {
lastIndex = (lastIndex + 1) % COLORS.length;
this.setAttribute('material', 'color', COLORS[lastIndex]);
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});
</script>
<body>
<a-scene>
<a-entity camera look-controls>
<a-entity cursor="rayOrigin: mouse"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-entity>
<a-entity id="box" cursor-listener geometry="primitive: box" position="0 1 -5" material="color: blue"></a-entity>
</a-scene>
</body>