ar.js 单击适用于 PC 但不适用于移动设备

Question

I am building a small application with ar.js and everything seems to work on pc but once I try it on my phone I can't seem to be able to click anymore. Everything also ends up being stretched or squashed depending on the rotation of the phone.

I think the not being able to press anything has to do with the stretching/squashing but I don't know how I should fix such an issue?

Currently, the js looks like this

AFRAME.registerComponent('interactable-object', 
{
  init: function ()
  {
      var el = this.el;
      el.addEventListener('click', (e) =>
      {
         console.log("item pressed");
      }
  }
}

and the Html code like this:

<a-entity id='3dmodel' interactable-object position="1 0 -2" scale="5 5 5"
                        obj-model=" obj: url(models/3dmodel.obj);
                                    mtl: url(models/3dmaterial.mtl); ">

</a-entity>

I use cursor: rayOrigin: mouse; in my a-marker; I don't know if this is the correct one to use for mobile touch either? Am I doing something wrong or is there a way to make the object more responsive?

I'm using ar.js 2.2.1 and aframe 0.9.2.

Answer 1

As far as i know you need to listen to 'touchstart' also:

el.addEventListener('touchstart', (e) =>

But the problem i'm facing now is that this doesn't work well on the edges of the screen, if someone knows a workaround let me know.