Question

我尝试在浏览器中禁用我的光标一些想法？在aframesite（https://aframe.io/docs/master/core/utils.html#function-utils）我找到了AFRAME.utils.device.isMobile（），但我不知道我应该怎么做它我试过这样的事情：

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

所以我可以看到我是否至少可以检测到它，但我想我有一个语法问题，请帮助:) 这是我的光标组件，如果需要的话。

<!--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>

Answer 1

如何使用一个简单的组件来切换光标的可见性：

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")
   }
 }
})

使用如下设置：

<!--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>

Aframe设备检测

1 个答案: