Aframe scene hides under video

[bmora-42600]

I am trying to build a mind-ar demo using react + aframe but can't get it to show the scene. The mind-ar tracking works fine but the scene seems to be hidden under the video, when the default marker is tracked nothing shows. When I open the aframe inspector the scene appears, after that everything works just fine.

Reproduction instructions:

• npx create-react-app test
• cd test
• npm i mind-ar --save
• npm i aframe --save

Edit App.js:

---

import './App.css';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';

function App() {
  return (
    <a-scene mindar-image="imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-assets>
        <img id="card" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/card-example/card.png" />
        <a-asset-item id="avatarModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/card-example/softmind/scene.gltf"></a-asset-item>
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-plane src="#card" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
      </a-entity>
      <a-box position="0 0 -5"></a-box>
    </a-scene>
  );
}

export default App;

[stefan-langenmaier]

I have the same behaviour using svelte. Did you find a solution?

[hiukim]

Can you provide a screen recording to show the problem?