CODEWITHSUNDEEP
jquerybrowserdevicedetectionaframe
Delidragon
Delidragon

Reputation: 165

Aframe device detection

i try to disable my cursor in browser some ideas? On the aframesite (https://aframe.io/docs/master/core/utils.html#function-utils) i found AFRAME.utils.device.isMobile () but i dont know what i should do with it i tried something like this:

<script>AFRAME.utils.device.isMobile ()
  if (isMobile = true){
    console.log('hallo mobile');
  } else {
    console.log('hallo browser');
  }
</script>

so i can see if i at least can detect it, but i guess i have an syntax issue please help :) here my cursor component if needed.

<!--camera-->
<a-entity rotation="0 90 0">
  <a-camera user-height="0" look-controls>
    <a-cursor cursor="fuse: true; fuseTimeout: 2000"
        position="0 0 -0.1"
        geometry="primitive: ring;
        radiusInner: 0.002;
        radiusOuter: 0.003"
        material="color: red; shader: flat">
        <a-animation attribute="scale"
                          to="3 3 3"
                          dur="2000"
                          begin="cursor-fusing"
                          fill="backwards"
                          easing="linear">
             </a-animation>
    </a-cursor>
    <a-entity position="0 0 -0.1" 
        geometry="primitive: ring;
        radiusInner: 0.009;
        radiusOuter: 0.0095"
        material="color: red; opacity: 0.25; shader: flat"></a-entity>
  </a-camera>  
</a-entity>

Upvotes: 1

Views: 866

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

how about a simple component which will switch the visibility of the cursor:

AFRAME.registerComponent("foo", {
  init: function() {
   var cursor = document.querySelector("a-cursor")
   if (AFRAME.utils.device.isMobile() === false) {
      cursor.setAttribute("visible", false);
      //or just cursor.parentNode.removeChild(cursor)
      this.el.sceneEl.setAttribute("cursor","rayOrigin","mouse")
   }
 }
})

with a setup like this:

<!--camera-->
<a-entity foo rotation="0 90 0">
  <a-camera user-height="0" look-controls>
    <a-cursor fuse="true" fuseTimeout="2000"
      position="0 0 -0.1"
      geometry="primitive: ring;
      radiusInner: 0.002;
      radiusOuter: 0.003"
      material="color: red; shader: flat">
      <a-animation attribute="scale"
                      to="3 3 3"
                      dur="2000"
                      begin="cursor-fusing"
                      fill="backwards"
                      easing="linear">
      </a-animation>
   </a-cursor>
 </a-camera>  
</a-entity>

Upvotes: 1

Related Questions