My charts appear in front of a globe object in A-Frame, but when I move the camera in the scene, the order of objects changes causing the charts to overlap and become invisible. I'm unsure of the cause and how to fix it. Here are some screenshots of the issue:
Here is the code snippet:
const globeEntity = document.getElementById('globe');
... (rest of the code snippet) ...
<meta charset="utf-8">
<title>A-Frame 3D Globe Component Example</title>
... (meta and script tags) ...
</head>
<body>
<a-scene>
<a-assets>
... (assets) ...
<a-entity position="0 0 0" movement-controls="fly: true; speed: 0.5">
... (entity and camera setup) ...
<a-sky src="#skyNight"></a-sky>
<a-entity id="moon" class="collidable" position="13.202 14.175 2.96" scale="0.05 0.05 0.05" globe="globe-image-url: https://cdn.glitch.global/c153e3cf-7430-444d-9897-4e97f1ef8d35/2k_moon.jpg?v=1658444439177;">
</a-entity>
... (additional entities and text) ...
</a-scene>Here's a visual representation of the object order in the scene: https://i.sstatic.net/AtvJk.png