My cursor is hidden behind my 3d-model in WebXR project - html

Question

I have whittled down the project to only to the items that are affected by my problem. It can be found here:
https://glitch.com/edit/#!/lean-luxuriant-vegetable
if you look around, you will notice that the cursor is hidden behind the 3d-model. This also happens if I use a cursor primative. The cursor is not hidden behind other models in the scene when I have the whole thing all together, it is only thins one. Why would this be happening?

Answer 1

The "ring" cursor from the docs:
<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>
is a combination of:
The visual element (ring geometry, and material components)
The cursor functionality (the cursor component)
The ring is nothing but another 3D entity in the scene, and it will be covered by anything thats closer to the camera:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<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>
</a-scene>
You can tell the material, that you don't want it to be affected by the depth buffer (simply put, we don't want to check if something is covering our material) with the depthTest property of the material.
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<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; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
But the cursor component is to far to register the box (as it's literally inside the box), so you can split the functionality from the visual, and make the cursor closer:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"
color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -.001"></a-entity>
<a-entity position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
So we've both the ring visible, and the functinality.
Why not make everything closer then? I had some visual issues with scaling when stuff was 1mm from the camera. Doesn't mean it'll bother you, but if so - the above way deals with it.