-1

How to add touch controls for mobile and mouse click for desktop in aframe.I am getting confusing with this part in aframe is there any help?

Thanks

KumareshR
  • 43
  • 7

1 Answers1

0

Try using the mouse-component, the raycasts emitted from the mouse clicks seem to work as well with mobile touch events.

Note, that You may run into multiple issues when You use the a cursor, and the mouse-cursor-component simultaneously. For example it is possible to make a double click ( one with the component, second with the cursor ).
Piotr Adam Milewski
  • 14,150
  • 3
  • 21
  • 42
  • **click** event for mobile is working but the problem is while I take the finger from the mobile the content is still visible there – KumareshR Jul 20 '17 at 08:56
  • @KumareshR I don't quite understand, do You have a problem that the click occurs twice or something ? – Piotr Adam Milewski Jul 20 '17 at 08:58
  • no I want to add touch control for mobile how to do – KumareshR Jul 20 '17 at 09:37
  • @KumareshR You mean You want to rotate the camera with touching Your phone ? disable the gyro rotation ? or you want to emit clicks with touching elements ? – Piotr Adam Milewski Jul 20 '17 at 10:02
  • Yes it emit clicks with touching elements – KumareshR Jul 20 '17 at 10:05
  • @KumareshR when i use the linked component, I am able to click elements by touching them, I didn't quite get what is happening when you take your finger off the screen. – Piotr Adam Milewski Jul 20 '17 at 10:09
  • ensoimmersive.co.in/webvr/1RK/ check this site in mobile u'll get what I am trying there are three info icons interact with touch – KumareshR Jul 20 '17 at 10:11
  • @KumareshR works for me: https://jsfiddle.net/gftruj/ev4hf4Lg/ Touching the sphere/box triggers the click event. Most of the code is taken from this question: https://stackoverflow.com/questions/45204267/aframe-cycle-through-colors-using-array. And pls disable those overlays on mobile, I couldn't see much :P – Piotr Adam Milewski Jul 20 '17 at 10:30
  • For desktop I am using mouse enter and mouse leave, what I want to use here for mobile ? – KumareshR Jul 20 '17 at 10:46
  • use 'click'. mouseenter/mouseleave are good for HOVERING events, when you hover the mouse over the object :) – Piotr Adam Milewski Jul 20 '17 at 10:47
  • yeah I am use the click control here the problem is when I touch the icon the text is visible that's cool working great but when I take the finger from that Icon the text is not going means the text is still visible there R u get what I am saying? – KumareshR Jul 20 '17 at 10:52
  • I add this code for disabling gaze in desktop and mobile while adding these code click control is not working – KumareshR Jul 20 '17 at 11:01
  • var cursorEl = document.querySelector('a-cursor'); if (!AFRAME.utils.device.isMobile() ) { cursorEl.parentEl.removeChild(cursorEl); } – KumareshR Jul 20 '17 at 11:02
  • @KumareshR I'm afraid mouseleave won't work in any form, I tried using other events, like touchstart, touchend, but I would suggest making these markers toggle'able on click, not on hover. Click -> visible, Click ->invisible. I wanted to make it visible while the finger is down, but it would require creating a new component utilizing the touch events, as i cant find any existing ones. – Piotr Adam Milewski Jul 20 '17 at 11:16
  • Have you tried using Ray Input? It standardizes everything with touch, mouse, 0DOF, 3DOF and even 6DOF. – Lord Goderick Jul 20 '17 at 11:25
  • @PiotrAdamMilewski how to add compass in aframe scene based on mouse click and drag rotation the compass should rotate like in facebook 360 videos they are using the same thing – KumareshR Jul 21 '17 at 12:31