-1

When adding the embedded component to a scene for easier styling of elements in my AR scene, the raycast/click event does not trigger on the correct spot. When I remove the embedded tag from the scene the raycast is working like it should but the objects in the scene are at different scales/positions when viewing the webpage on a mobile device.

Is there any way to have propper raycasting in an embedded scene?

<body style="margin: 0px; overflow: hidden">
 <a-scene embedded arjs="debugUIEnabled: false; sourceType: webcam">
  <a-marker type='pattern' url='custommarkers/pattern-marker.patt' cursor="rayOrigin: mouse; fuse: false">
   <a-circle id="button" src="#buttonimg" radius=".2" rotation="-90 0 0" position="0 0 1">
    <a-animation begin="buttonpressed" dur="750" attribute="scale" to="2 4 4" direction="alternate"></a-animation>
   </a-circle>
  </a-marker>
 </a-scene>
</body>

The 'buttonpressed' is an event send from the button when it is clicked. I can click 'The button' but not on a spot where the graphic of the circle is

Martijn Eisses
  • 1
  • 1

1 Answers1

0

The cursor in ar.js behaves a bit differently, you need to add it to the a-marker element:

<a-marker cursor='rayOrigin: mouse'>
  <a-amazing-stuff/>
</a-marker>

The cursor may calculate the rays using the entire document width / height.

If you throw your ar.js website into an iframe

<iframe src="myArJsWebsite.com"></iframe>

the cursor component should work properly. Check it out with a HIRO marker here.

Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • Sadly this does not fix the problem. The cursor still isn't clicking in the correct spot. – Martijn Eisses Nov 12 '18 at 09:06
  • I've tried it but it doesn't work.. I have added some code that i'm using – Martijn Eisses Nov 12 '18 at 14:41
  • You mean the code, or the example won't work ? I've tried https://ar-cursor.glitch.me/ on chrome / firefox PC, and firefox on an android phone, it triggers the animation and prints out a `

    ` element on the screen on click

     – Piotr Adam Milewski Nov 12 '18 at 21:52
  • The ar-cursor.glitch.me isn't working correctly either. I believe I've found the error. I'm pointing the camera towards the marker on an angle. This is causing it to act weird. And when moving the camera it doesn't seem to update the raycast origin. Thanks for the help btw! – Martijn Eisses Nov 14 '18 at 09:10