AR.js: Conflict with... cursor="rayOrigin: mouse"

First of all, congratulations for your great work, it’s awesome.

The latest a-frame version 0.6.1 now includes Mayognaiseaframe-mouse-cursor-component” which works fine on its own. I’m trying to integrate this component into aframe-ar by adding: cursor=“rayOrigin: mouse” on the a-marker-camera but I get this error:

three.js:15179 Uncaught TypeError: Cannot read property ‘count’ of undefined at Lt.Object.assign.raycast (three.js:15179) at Xn (three.js:39252) at jn.intersectObjects (three.js:39329) at i.tick (raycaster.js:167) at a-scene.js:517 at Array.forEach (<anonymous>) at HTMLElement.value (a-scene.js:515) at HTMLElement.value (a-scene.js:562) at HTMLElement.render (bind.js:12) at e (a-scene.js:459)

This is the code I’m using:

<html>
  <head>
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
    <script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
    <script>
      THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
    </script>
  </head>
  <body>
    <a-scene  embedded artoolkit='sourceType: webcam;'>
      <a-box position="0 0 0" rotation="30 30 0" color="skyblue"
             event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
             event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
        <a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
      </a-box>
      <a-marker-camera  preset='hiro'  cursor="rayOrigin: mouse"> </a-marker-camera>
    </a-scene>
  </body>
</html>

Everything works fine until I add… cursor=“rayOrigin: mouse”. I guess this is not currently supported because it’s a new aframe component, but I was wondering if anyone else has tried to use it with success. And if not, where can I start digging into to try to fix this issue?

Thanks in advance Keep up the awesomeness !

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 2
  • Comments: 27 (5 by maintainers)

Most upvoted comments

any progress here?, need to be able to detect a click on an element urgently, but so far clicks are detected across the entire canvas and screen, how could we detect a click on an specific element triggered by the marker?

here this is due to the camera having a custom projection matrix. and this being trouble with three.js. aka this is a complex hairy problem to fix.

that said here people just want to be able to click on object. and this one could be provided more easily! let me reread this issue under this angle 😃