<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Raycaster</title> <meta name="description" content="Raycaster - A-Frame"> <script src="../../../dist/aframe-master.js"></script> </head> <body> <script> AFRAME.registerComponent('raycast-blab', { init: function () { this.el.addEventListener('raycaster-intersected', function (evt) { var el = evt.target; // May get two intersection events per tick; same element, different faces. console.log('raycaster-intersected ' + el.outerHTML); el.setAttribute('material', 'color', '#7f7'); }); this.el.addEventListener('raycaster-intersected-cleared', function (evt) { var el = evt.target; // May get two intersection events per tick; same element, different faces. console.log('raycaster-intersected-cleared ' + el.outerHTML); el.setAttribute('material', 'color', '#f77'); }); } }); </script> <a-scene> <a-entity camera look-controls wasd-controls raycaster="recursive: false; interval: 1000"></a-entity> <a-entity geometry="primitive: box" material="color: #000" position="0 0 -2" raycast-blab></a-entity> </a-scene> </body> </html>