1 line
7.2 KiB
Plaintext
1 line
7.2 KiB
Plaintext
|
{"version":3,"file":"ARButton.cjs","sources":["../../src/webxr/ARButton.ts"],"sourcesContent":["import { WebGLRenderer } from 'three'\n\nconst ARButton = {\n createButton(renderer: WebGLRenderer, sessionInit: XRSessionInit = {}): HTMLButtonElement | HTMLAnchorElement {\n const button = document.createElement('button')\n\n function showStartAR(/*device*/): void {\n if ((sessionInit as any).domOverlay === undefined) {\n const overlay = document.createElement('div')\n overlay.style.display = 'none'\n document.body.appendChild(overlay)\n\n const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n svg.setAttribute('width', '38px')\n svg.setAttribute('height', '38px')\n svg.style.position = 'absolute'\n svg.style.right = '20px'\n svg.style.top = '20px'\n svg.addEventListener('click', function () {\n currentSession?.end()\n })\n overlay.appendChild(svg)\n\n const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28')\n path.setAttribute('stroke', '#fff')\n path.setAttribute('stroke-width', '2px')\n svg.appendChild(path)\n\n if (sessionInit.optionalFeatures === undefined) {\n sessionInit.optionalFeatures = []\n }\n\n sessionInit.optionalFeatures.push('dom-overlay')\n ;(sessionInit as any).domOverlay = { root: overlay }\n }\n\n //\n\n let currentSession: XRSession | null = null\n\n async function onSessionStarted(session: XRSession): Promise<void> {\n session.addEventListener('end', onSessionEnded)\n\n renderer.xr.setReferenceSpaceType('local')\n\n await renderer.xr.setSession(session as any)\n\n button.textContent = 'STOP AR'\n ;(sessionInit as any).domOverlay!.root.style.display = ''\n\n currentSession = session\n }\n\n function onSessionEnded(/*event*/): void {\n currentSession!.removeEventListener('end', onSessionEnded)\n\n button.textContent = 'START AR'\n ;(sessionInit as any).domOverlay!.root.style.display = 'none'\n\n currentSession = null\n }\n\n //\n\n button.style.display = ''\n\n button.style.cursor = 'pointer'\n button.style.left = 'calc(50% - 50px)'\n button.style.width = '100px'\n\n button.textContent = 'START AR'\n\n button.onmouseenter = (): void => {\n button.style.opacity = '1.0'\n }\n\n button.onmouseleave = (): void => {\n button.style.opacity = '0.5'\n }\n\n button.onclick = (): void => {\n if (currentSession === null) {\n ;(navigator as Navigator).xr!.requestSession('immersive-ar', sessionInit).then(onSessionStarted)\n } else {\n currentSession.end()\n }\n }\n }\n\n function disableButton(): void {\n button.style.display = ''\n\n button.style.cursor = 'auto'\n button.style.left = 'calc(50% - 75px)'\n button.style.width = '150px'\n\n button.onmouseenter = null\n button.onmouseleave = null\n\n button.onclick = null\n }\n\n function showARNotSupported(): void {\n disableButton()\n\n button.textContent = 'AR NOT SUPPORTED'\n }\n\n function stylizeElement(element: HTMLElement): void {\n element.style.position = 'absolute'\n element.style.bottom = '20px'\n element.style.padding = '12px 6px'\n element.style.border = '1px solid #fff'\n element.style.borderRadius = '4px'\n element.style.background = 'rgba(0,0,0,0.1)'\n element.style.color = '#fff'\n element.style.font = 'normal 13px sans-serif'\n element.style.textAlign = 'center'\n element.style.opacity = '0.5'\n element.style.outline = 'none'\n element.style.zIndex = '999'\n }\n\n if ('xr' in navigator) {\n button.id = 'ARButton'\n button.style.display = 'none'\n\n stylizeElement(button)\n\n // Query for session mode\n ;(navigator as N
|