@polygonjs/polygonjs
Version:
node-based WebGL 3D engine https://polygonjs.com
110 lines (109 loc) • 3.94 kB
JavaScript
;
import { applyDefaultStyle, createInfoLink, disableButtonElement, setErrorStyle } from "./Common";
export class CoreARButton {
static createButton(options, sessionInit) {
var _a;
const { renderer, controller } = options;
const button = document.createElement("button");
function showStartAR() {
if (sessionInit.domOverlay === void 0) {
const overlay = document.createElement("div");
overlay.style.display = "none";
document.body.appendChild(overlay);
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "38");
svg.setAttribute("height", "38");
svg.style.position = "absolute";
svg.style.right = "20px";
svg.style.top = "20px";
svg.addEventListener("click", function() {
currentSession == null ? void 0 : currentSession.end();
});
overlay.appendChild(svg);
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
path.setAttribute("stroke", "#fff");
path.setAttribute("stroke-width", "2");
svg.appendChild(path);
if (sessionInit.optionalFeatures === void 0) {
sessionInit.optionalFeatures = [];
}
sessionInit.optionalFeatures.push("dom-overlay");
sessionInit.domOverlay = { root: overlay };
}
let currentSession = null;
async function onSessionStarted(session) {
session.addEventListener("end", onSessionEnded);
renderer.xr.setReferenceSpaceType("local");
await renderer.xr.setSession(session);
button.textContent = "STOP AR";
if (sessionInit.domOverlay) {
sessionInit.domOverlay.root.style.display = "";
}
currentSession = session;
}
function onSessionEnded() {
if (!currentSession) {
return;
}
currentSession.removeEventListener("end", onSessionEnded);
button.textContent = "START AR";
if (sessionInit.domOverlay) {
sessionInit.domOverlay.root.style.display = "none";
}
currentSession = null;
}
button.style.display = "";
button.style.cursor = "pointer";
button.style.left = "calc(50% - 50px)";
button.style.width = "100px";
button.style.backgroundColor = "#222";
button.textContent = "START AR";
button.onmouseenter = function() {
button.style.opacity = "1.0";
};
button.onmouseleave = function() {
button.style.opacity = "0.5";
};
button.onclick = function() {
if (currentSession === null) {
controller.requestSession(sessionInit, onSessionStarted);
} else {
currentSession.end();
}
};
}
function disableButton() {
disableButtonElement(button);
}
function showARNotSupported() {
disableButton();
button.textContent = "AR NOT SUPPORTED";
setErrorStyle(button);
}
function showARNotAllowed(exception) {
disableButton();
console.warn("Exception when trying to call xr.isSessionSupported", exception);
button.textContent = "AR NOT ALLOWED";
setErrorStyle(button);
}
function stylizeElement(element) {
applyDefaultStyle(element);
element.style.background = "rgb(20 61 24 / 95%)";
}
if ("xr" in navigator) {
button.id = "ARButton";
button.style.display = "none";
stylizeElement(button);
(_a = navigator.xr) == null ? void 0 : _a.isSessionSupported("immersive-ar").then(function(supported) {
supported ? showStartAR() : showARNotSupported();
}).catch(showARNotAllowed);
return button;
} else {
const message = createInfoLink();
stylizeElement(message);
setErrorStyle(message);
return message;
}
}
}