How to embed XR checks and start buttons externally?

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

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

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

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

    vrButton.addEventListener("click", () => {
                    // how to StartVR?

    function onLoaded() {
        console.log("Loading finished");


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

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.

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

by user 486138778348683274