How to embed XR checks and start buttons externally?

🌵 Needle Engine
1

Hello, how can i Start VR/AR from a landing page while needle-engine is hidden like this?

    <article id="canvasContainer" class="hidden loading">

        <script>
            window.global = window;
            var parcelRequire;
        </script>
        <script type="module" src="./src/generated/gen.js"></script> 
        <script type="module" src="./src/main.ts"></script> 
        <needle-engine loadfinished="onLoaded"></needle-engine>
        
    </article>
    
    <script type="text/javascript">

    let landingPage = document.getElementById("landingPage");
    let containerElement = document.getElementById("canvasContainer");
    let mainElement = document.querySelector("main");
        
    flatButton.addEventListener("click", () => {
        containerElement.classList.remove("hidden");
    });

    vrButton.addEventListener("click", () => {
        containerElement.classList.remove("hidden");
                    // how to StartVR?
    });

    function onLoaded() {
        console.log("Loading finished");
        mainElement.classList.remove("loading");
        containerElement.classList.remove("loading");
        
    }

    </script>

I am looking for a solution like the CustomXRButton sample that is working before the needle scene is shown.

Original Post on Discord

by user 486138778348683274

2

Hey @binary, the Custom XR Buttons sample is the right starting point, I think you can just set Needle Engine (or a parent element) opacity to 0 and pointer-events: none to hide it. We’re doing some checks if it’s visible and then not load it, but hiding it like this (where it’s still on and rendering) should work.

3

Thanks! That works, even with nice blending :slightly_smiling_face:

by user 486138778348683274