@needle-tools/engine/src/engine-components/export/usdz/utils/quicklook.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import { Context } from "../../../../engine/engine_setup.js";

export function ensureQuicklookLinkIsCreated(context: Context, supportsQuickLook: boolean) : HTMLAnchorElement {
    const existingLink = context.domElement.shadowRoot!.querySelector("link[rel='ar']");
    if (existingLink) return existingLink as HTMLAnchorElement;

    /*
    generating this:
    <div class="menu">
      <button id="open-in-ar">Open in QuickLook</button>
      <a style="display:none;" id="link" rel="ar" href="" download="asset.usdz">
        <img id="button" width="100" src="files/arkit.png">
      </a>
    </div>
    */

    const div = document.createElement("div");
    div.classList.add("menu");
    div.classList.add("quicklook-menu");
    div.style.display = "none";
    div.style.visibility = "hidden";

    const button = document.createElement("button");
    button.id = "open-in-ar";
    if (supportsQuickLook) {
      button.innerText = "View in AR";
      button.title = "View this scene in AR. The scene will be exported to USDZ and opened with Apple's QuickLook.";
    }
    else {
      button.innerText = "View in AR";
      button.title = "Download this scene for AR. Open the downloaded USDZ file to view it in AR using Apple's QuickLook.";
    }

    div.appendChild(button);

    const link = document.createElement("a");
    link.id = "needle-usdz-link";
    link.style.display = "none";
    link.rel = "ar";
    link.href = "";
    link.target = "_blank";
    div.appendChild(link);

    const img = document.createElement("img");
    img.id = "button";
    // img.src = "files/arkit.png";
    link.appendChild(img);

    context.domElement.shadowRoot!.appendChild(div);
    return link as HTMLAnchorElement;
}