A-Frame桌面端光标禁用及设备检测语法问题求助

First, let's fix your device detection code—you had a couple of syntax issues preventing it from working correctly. Here's the corrected version that properly checks if the device is mobile:

// Wait for the DOM to fully load before running our code
window.addEventListener('DOMContentLoaded', () => {
  const isMobileDevice = AFRAME.utils.device.isMobile();
  
  if (isMobileDevice) {
    console.log('Hello mobile device!');
  } else {
    console.log('Hello desktop browser!');
  }
});

Key Fixes in Your Original Code: #

• You didn't capture the return value of AFRAME.utils.device.isMobile() into a variable (or use it directly in the condition).
• The syntax for the if statement was invalid—you had the function call and conditional logic mashed together without proper structure.
• Using isMobile = true is an assignment, not a comparison. Since isMobile() returns a boolean, you can just use the variable directly in the condition.

Now, Disable the Cursor on Desktop #

Once we can reliably detect desktop devices, we can modify the cursor component to either hide it, disable its functionality, or remove it entirely. Here are a few practical approaches:

Approach 1: Hide the Cursor and Disable Its Functionality

Add an id to your cursor element so we can target it easily, then adjust its visibility and disable core components on desktop:

<!-- Camera with cursor (added id="desktop-disabled-cursor") -->
<a-entity rotation="0 90 0">
  <a-camera user-height="0" look-controls>
    <a-cursor id="desktop-disabled-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>

<script>
window.addEventListener('DOMContentLoaded', () => {
  const isMobile = AFRAME.utils.device.isMobile();
  const cursorEl = document.getElementById('desktop-disabled-cursor');
  
  if (!isMobile) {
    // Hide the cursor visually
    cursorEl.setAttribute('visible', false);
    // Disable the cursor component's interaction logic
    cursorEl.setAttribute('cursor', 'enabled', false);
    // Disable the raycaster (used by the cursor to detect objects)
    cursorEl.setAttribute('raycaster', 'enabled', false);
  }
});
</script>

Approach 2: Remove the Cursor Element Entirely on Desktop

If you don't need the cursor at all on desktop, you can remove it from the DOM entirely:

window.addEventListener('DOMContentLoaded', () => {
  const isMobile = AFRAME.utils.device.isMobile();
  const cursorEl = document.getElementById('desktop-disabled-cursor');
  
  if (!isMobile) {
    cursorEl.remove();
  }
});

Approach 3: Use a Custom A-Frame Component (Modular Solution)

For larger projects, a custom component keeps your code clean and reusable:

<script>
AFRAME.registerComponent('desktop-disable-cursor', {
  init: function() {
    const isMobile = AFRAME.utils.device.isMobile();
    if (!isMobile) {
      this.el.setAttribute('visible', false);
      this.el.setAttribute('cursor', 'enabled', false);
      this.el.setAttribute('raycaster', 'enabled', false);
    }
  }
});
</script>

<!-- Attach the custom component to your cursor -->
<a-cursor desktop-disable-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>

All these methods ensure the cursor is only active on mobile devices, while being disabled or removed on desktop browsers.

内容的提问来源于stack exchange，提问作者Delidragon