aframewebvr

How does aframe walking/ clicking work on mobile phones vs desktops?


I want to create a webvr scene that allows a user to click on objects as events and move around the scene. Is this possible using a-frame? I know that a frame allows you to do both of these with a mouse and wasd keys on a computer. How does this work on mobile phone? Can the user still walk around a scene?


Solution

  • Yes, it is possible to click objects while in mobile/VR and move around, but it is somewhat complex. Lets break it down.

    1) Clicking without using buttons is called fusing. It involves the user hovering over an object for a certain period of time, and then a fuse event is thrown, which can be caught by a listener just like a click event. You can set the fuse properties inside the cursor component, and generally it is a good idea to include a small ring locked to the center of the camera view (as a child of the camera) so the user knows that an implicit click occurs inside the ring. You can set that up like this:

    <a-entity camera look-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
      </a-entity>
    </a-entity>
    

    more on the cursor here:

    https://aframe.io/docs/0.9.0/components/cursor.html#sidebar

    You also might want to implement a rollover state, to alert the user that an object is clickable, say by changing color on mouse over. Here is a glitch that show how to set up and handle a rollover event:

    https://glitch.com/~rollover-rotate

    Walking around on a mobile device is no problem using wasd-controls. Clicking on the screen allows navigation. However, if you are using the phone as a VR device, wasd will not work. And even if it did, (some headsets have mouse buttons), the viewer would probably get sick if the camera moves but their body does not. The usual trick is to implement a teleportation system, like the Vive uses, but that is somewhat complex. Here is a glitch that shows how to build a teleportation system.

    https://glitch.com/~aframe-teleport-controls-extra

    good luck!