Estoy tratando de crear un sitio web en ReactJS, pero parece que no puedo controlar el tiempo de visualización del botón en el visor de modelos. Solía poder controlar el tiempo de visualización del botón usando esto:

 <script> const modelViewer = document.querySelector("model-viewer"); const button = document.getElementById("arbutton"); function checkagain() { if (modelViewer.modelIsVisible === true) { button.style.display = "block"; } else { checkagain2 = setTimeout(showbutton, 5); } } function showbutton() { if (modelViewer.modelIsVisible === true) { button.style.display = "block"; } else { checkagain1 = setTimeout(checkagain, 5); } } modelViewer.addEventListener("load", function() { showbutton(); }); </script>

Desde este enlace

Y así es como estoy importando Model-Viewer en ReactJS:

 <Helmet> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js" async /> </Helmet> <model-viewer ar ar-modes="webxr scene-viewer quick-look" style={{width:"100%", height:"50vh"}} alt="Your model Loading" //shadow-intensity="1" environment-image="neutral" exposure="1" poster="https://modelviewer.dev/assets/poster-astronaut.png" camera-controls loading="eager" src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" enable-pan > <button id="arbutton" className="arbutton" slot="ar-button">👋 Show AR</button> </model-viewer>