three-stdlib 2.35.4 → 2.35.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,122 +1,119 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const ARButton = /* @__PURE__ */ (() => {
4
- class ARButton2 {
5
- static createButton(renderer, sessionInit = {}) {
6
- const button = document.createElement("button");
7
- function showStartAR() {
8
- if (sessionInit.domOverlay === void 0) {
9
- const overlay = document.createElement("div");
10
- overlay.style.display = "none";
11
- document.body.appendChild(overlay);
12
- const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
13
- svg.setAttribute("width", "38px");
14
- svg.setAttribute("height", "38px");
15
- svg.style.position = "absolute";
16
- svg.style.right = "20px";
17
- svg.style.top = "20px";
18
- svg.addEventListener("click", function() {
19
- currentSession == null ? void 0 : currentSession.end();
20
- });
21
- overlay.appendChild(svg);
22
- const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
23
- path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
24
- path.setAttribute("stroke", "#fff");
25
- path.setAttribute("stroke-width", "2px");
26
- svg.appendChild(path);
27
- if (sessionInit.optionalFeatures === void 0) {
28
- sessionInit.optionalFeatures = [];
29
- }
30
- sessionInit.optionalFeatures.push("dom-overlay");
31
- sessionInit.domOverlay = { root: overlay };
3
+ const ARButton = {
4
+ createButton(renderer, sessionInit = {}) {
5
+ const button = document.createElement("button");
6
+ function showStartAR() {
7
+ if (sessionInit.domOverlay === void 0) {
8
+ const overlay = document.createElement("div");
9
+ overlay.style.display = "none";
10
+ document.body.appendChild(overlay);
11
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
12
+ svg.setAttribute("width", "38px");
13
+ svg.setAttribute("height", "38px");
14
+ svg.style.position = "absolute";
15
+ svg.style.right = "20px";
16
+ svg.style.top = "20px";
17
+ svg.addEventListener("click", function() {
18
+ currentSession == null ? void 0 : currentSession.end();
19
+ });
20
+ overlay.appendChild(svg);
21
+ const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
22
+ path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
23
+ path.setAttribute("stroke", "#fff");
24
+ path.setAttribute("stroke-width", "2px");
25
+ svg.appendChild(path);
26
+ if (sessionInit.optionalFeatures === void 0) {
27
+ sessionInit.optionalFeatures = [];
32
28
  }
33
- let currentSession = null;
34
- async function onSessionStarted(session) {
35
- session.addEventListener("end", onSessionEnded);
36
- renderer.xr.setReferenceSpaceType("local");
37
- await renderer.xr.setSession(session);
38
- button.textContent = "STOP AR";
39
- sessionInit.domOverlay.root.style.display = "";
40
- currentSession = session;
41
- }
42
- function onSessionEnded() {
43
- currentSession.removeEventListener("end", onSessionEnded);
44
- button.textContent = "START AR";
45
- sessionInit.domOverlay.root.style.display = "none";
46
- currentSession = null;
47
- }
48
- button.style.display = "";
49
- button.style.cursor = "pointer";
50
- button.style.left = "calc(50% - 50px)";
51
- button.style.width = "100px";
52
- button.textContent = "START AR";
53
- button.onmouseenter = () => {
54
- button.style.opacity = "1.0";
55
- };
56
- button.onmouseleave = () => {
57
- button.style.opacity = "0.5";
58
- };
59
- button.onclick = () => {
60
- if (currentSession === null) {
61
- navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
62
- } else {
63
- currentSession.end();
64
- }
65
- };
29
+ sessionInit.optionalFeatures.push("dom-overlay");
30
+ sessionInit.domOverlay = { root: overlay };
66
31
  }
67
- function disableButton() {
68
- button.style.display = "";
69
- button.style.cursor = "auto";
70
- button.style.left = "calc(50% - 75px)";
71
- button.style.width = "150px";
72
- button.onmouseenter = null;
73
- button.onmouseleave = null;
74
- button.onclick = null;
32
+ let currentSession = null;
33
+ async function onSessionStarted(session) {
34
+ session.addEventListener("end", onSessionEnded);
35
+ renderer.xr.setReferenceSpaceType("local");
36
+ await renderer.xr.setSession(session);
37
+ button.textContent = "STOP AR";
38
+ sessionInit.domOverlay.root.style.display = "";
39
+ currentSession = session;
75
40
  }
76
- function showARNotSupported() {
77
- disableButton();
78
- button.textContent = "AR NOT SUPPORTED";
79
- }
80
- function stylizeElement(element) {
81
- element.style.position = "absolute";
82
- element.style.bottom = "20px";
83
- element.style.padding = "12px 6px";
84
- element.style.border = "1px solid #fff";
85
- element.style.borderRadius = "4px";
86
- element.style.background = "rgba(0,0,0,0.1)";
87
- element.style.color = "#fff";
88
- element.style.font = "normal 13px sans-serif";
89
- element.style.textAlign = "center";
90
- element.style.opacity = "0.5";
91
- element.style.outline = "none";
92
- element.style.zIndex = "999";
41
+ function onSessionEnded() {
42
+ currentSession.removeEventListener("end", onSessionEnded);
43
+ button.textContent = "START AR";
44
+ sessionInit.domOverlay.root.style.display = "none";
45
+ currentSession = null;
93
46
  }
94
- if ("xr" in navigator) {
95
- button.id = "ARButton";
96
- button.style.display = "none";
97
- stylizeElement(button);
98
- navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
99
- supported ? showStartAR() : showARNotSupported();
100
- }).catch(showARNotSupported);
101
- return button;
102
- } else {
103
- const message = document.createElement("a");
104
- if (window.isSecureContext === false) {
105
- message.href = document.location.href.replace(/^http:/, "https:");
106
- message.innerHTML = "WEBXR NEEDS HTTPS";
47
+ button.style.display = "";
48
+ button.style.cursor = "pointer";
49
+ button.style.left = "calc(50% - 50px)";
50
+ button.style.width = "100px";
51
+ button.textContent = "START AR";
52
+ button.onmouseenter = () => {
53
+ button.style.opacity = "1.0";
54
+ };
55
+ button.onmouseleave = () => {
56
+ button.style.opacity = "0.5";
57
+ };
58
+ button.onclick = () => {
59
+ if (currentSession === null) {
60
+ navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
107
61
  } else {
108
- message.href = "https://immersiveweb.dev/";
109
- message.innerHTML = "WEBXR NOT AVAILABLE";
62
+ currentSession.end();
110
63
  }
111
- message.style.left = "calc(50% - 90px)";
112
- message.style.width = "180px";
113
- message.style.textDecoration = "none";
114
- stylizeElement(message);
115
- return message;
64
+ };
65
+ }
66
+ function disableButton() {
67
+ button.style.display = "";
68
+ button.style.cursor = "auto";
69
+ button.style.left = "calc(50% - 75px)";
70
+ button.style.width = "150px";
71
+ button.onmouseenter = null;
72
+ button.onmouseleave = null;
73
+ button.onclick = null;
74
+ }
75
+ function showARNotSupported() {
76
+ disableButton();
77
+ button.textContent = "AR NOT SUPPORTED";
78
+ }
79
+ function stylizeElement(element) {
80
+ element.style.position = "absolute";
81
+ element.style.bottom = "20px";
82
+ element.style.padding = "12px 6px";
83
+ element.style.border = "1px solid #fff";
84
+ element.style.borderRadius = "4px";
85
+ element.style.background = "rgba(0,0,0,0.1)";
86
+ element.style.color = "#fff";
87
+ element.style.font = "normal 13px sans-serif";
88
+ element.style.textAlign = "center";
89
+ element.style.opacity = "0.5";
90
+ element.style.outline = "none";
91
+ element.style.zIndex = "999";
92
+ }
93
+ if ("xr" in navigator) {
94
+ button.id = "ARButton";
95
+ button.style.display = "none";
96
+ stylizeElement(button);
97
+ navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
98
+ supported ? showStartAR() : showARNotSupported();
99
+ }).catch(showARNotSupported);
100
+ return button;
101
+ } else {
102
+ const message = document.createElement("a");
103
+ if (window.isSecureContext === false) {
104
+ message.href = document.location.href.replace(/^http:/, "https:");
105
+ message.innerHTML = "WEBXR NEEDS HTTPS";
106
+ } else {
107
+ message.href = "https://immersiveweb.dev/";
108
+ message.innerHTML = "WEBXR NOT AVAILABLE";
116
109
  }
110
+ message.style.left = "calc(50% - 90px)";
111
+ message.style.width = "180px";
112
+ message.style.textDecoration = "none";
113
+ stylizeElement(message);
114
+ return message;
117
115
  }
118
116
  }
119
- return ARButton2;
120
- })();
117
+ };
121
118
  exports.ARButton = ARButton;
122
119
  //# sourceMappingURL=ARButton.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ARButton.cjs","sources":["../../src/webxr/ARButton.ts"],"sourcesContent":["import { WebGLRenderer } from 'three'\n\nconst ARButton = /* @__PURE__ */ (() => {\n class ARButton {\n static createButton(\n renderer: WebGLRenderer,\n sessionInit: XRSessionInit = {},\n ): 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 Navigator)\n .xr!.isSessionSupported('immersive-ar')\n .then(function (supported: boolean) {\n supported ? showStartAR() : showARNotSupported()\n })\n .catch(showARNotSupported)\n\n return button\n } else {\n const message = document.createElement('a')\n\n if (window.isSecureContext === false) {\n message.href = document.location.href.replace(/^http:/, 'https:')\n message.innerHTML = 'WEBXR NEEDS HTTPS' // TODO Improve message\n } else {\n message.href = 'https://immersiveweb.dev/'\n message.innerHTML = 'WEBXR NOT AVAILABLE'\n }\n\n message.style.left = 'calc(50% - 90px)'\n message.style.width = '180px'\n message.style.textDecoration = 'none'\n\n stylizeElement(message)\n\n return message\n }\n }\n }\n\n return ARButton\n})()\n\nexport { ARButton }\n"],"names":["ARButton"],"mappings":"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"}
1
+ {"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 Navigator)\n .xr!.isSessionSupported('immersive-ar')\n .then(function (supported: boolean) {\n supported ? showStartAR() : showARNotSupported()\n })\n .catch(showARNotSupported)\n\n return button\n } else {\n const message = document.createElement('a')\n\n if (window.isSecureContext === false) {\n message.href = document.location.href.replace(/^http:/, 'https:')\n message.innerHTML = 'WEBXR NEEDS HTTPS' // TODO Improve message\n } else {\n message.href = 'https://immersiveweb.dev/'\n message.innerHTML = 'WEBXR NOT AVAILABLE'\n }\n\n message.style.left = 'calc(50% - 90px)'\n message.style.width = '180px'\n message.style.textDecoration = 'none'\n\n stylizeElement(message)\n\n return message\n }\n },\n}\n\nexport { ARButton }\n"],"names":[],"mappings":"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"}
@@ -1,7 +1,6 @@
1
1
  /// <reference types="webxr" />
2
2
  import { WebGLRenderer } from 'three';
3
3
  declare const ARButton: {
4
- new (): {};
5
4
  createButton(renderer: WebGLRenderer, sessionInit?: XRSessionInit): HTMLButtonElement | HTMLAnchorElement;
6
5
  };
7
6
  export { ARButton };
package/webxr/ARButton.js CHANGED
@@ -1,121 +1,118 @@
1
- const ARButton = /* @__PURE__ */ (() => {
2
- class ARButton2 {
3
- static createButton(renderer, sessionInit = {}) {
4
- const button = document.createElement("button");
5
- function showStartAR() {
6
- if (sessionInit.domOverlay === void 0) {
7
- const overlay = document.createElement("div");
8
- overlay.style.display = "none";
9
- document.body.appendChild(overlay);
10
- const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
11
- svg.setAttribute("width", "38px");
12
- svg.setAttribute("height", "38px");
13
- svg.style.position = "absolute";
14
- svg.style.right = "20px";
15
- svg.style.top = "20px";
16
- svg.addEventListener("click", function() {
17
- currentSession == null ? void 0 : currentSession.end();
18
- });
19
- overlay.appendChild(svg);
20
- const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
21
- path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
22
- path.setAttribute("stroke", "#fff");
23
- path.setAttribute("stroke-width", "2px");
24
- svg.appendChild(path);
25
- if (sessionInit.optionalFeatures === void 0) {
26
- sessionInit.optionalFeatures = [];
27
- }
28
- sessionInit.optionalFeatures.push("dom-overlay");
29
- sessionInit.domOverlay = { root: overlay };
1
+ const ARButton = {
2
+ createButton(renderer, sessionInit = {}) {
3
+ const button = document.createElement("button");
4
+ function showStartAR() {
5
+ if (sessionInit.domOverlay === void 0) {
6
+ const overlay = document.createElement("div");
7
+ overlay.style.display = "none";
8
+ document.body.appendChild(overlay);
9
+ const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
10
+ svg.setAttribute("width", "38px");
11
+ svg.setAttribute("height", "38px");
12
+ svg.style.position = "absolute";
13
+ svg.style.right = "20px";
14
+ svg.style.top = "20px";
15
+ svg.addEventListener("click", function() {
16
+ currentSession == null ? void 0 : currentSession.end();
17
+ });
18
+ overlay.appendChild(svg);
19
+ const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
20
+ path.setAttribute("d", "M 12,12 L 28,28 M 28,12 12,28");
21
+ path.setAttribute("stroke", "#fff");
22
+ path.setAttribute("stroke-width", "2px");
23
+ svg.appendChild(path);
24
+ if (sessionInit.optionalFeatures === void 0) {
25
+ sessionInit.optionalFeatures = [];
30
26
  }
31
- let currentSession = null;
32
- async function onSessionStarted(session) {
33
- session.addEventListener("end", onSessionEnded);
34
- renderer.xr.setReferenceSpaceType("local");
35
- await renderer.xr.setSession(session);
36
- button.textContent = "STOP AR";
37
- sessionInit.domOverlay.root.style.display = "";
38
- currentSession = session;
39
- }
40
- function onSessionEnded() {
41
- currentSession.removeEventListener("end", onSessionEnded);
42
- button.textContent = "START AR";
43
- sessionInit.domOverlay.root.style.display = "none";
44
- currentSession = null;
45
- }
46
- button.style.display = "";
47
- button.style.cursor = "pointer";
48
- button.style.left = "calc(50% - 50px)";
49
- button.style.width = "100px";
50
- button.textContent = "START AR";
51
- button.onmouseenter = () => {
52
- button.style.opacity = "1.0";
53
- };
54
- button.onmouseleave = () => {
55
- button.style.opacity = "0.5";
56
- };
57
- button.onclick = () => {
58
- if (currentSession === null) {
59
- navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
60
- } else {
61
- currentSession.end();
62
- }
63
- };
27
+ sessionInit.optionalFeatures.push("dom-overlay");
28
+ sessionInit.domOverlay = { root: overlay };
64
29
  }
65
- function disableButton() {
66
- button.style.display = "";
67
- button.style.cursor = "auto";
68
- button.style.left = "calc(50% - 75px)";
69
- button.style.width = "150px";
70
- button.onmouseenter = null;
71
- button.onmouseleave = null;
72
- button.onclick = null;
30
+ let currentSession = null;
31
+ async function onSessionStarted(session) {
32
+ session.addEventListener("end", onSessionEnded);
33
+ renderer.xr.setReferenceSpaceType("local");
34
+ await renderer.xr.setSession(session);
35
+ button.textContent = "STOP AR";
36
+ sessionInit.domOverlay.root.style.display = "";
37
+ currentSession = session;
73
38
  }
74
- function showARNotSupported() {
75
- disableButton();
76
- button.textContent = "AR NOT SUPPORTED";
77
- }
78
- function stylizeElement(element) {
79
- element.style.position = "absolute";
80
- element.style.bottom = "20px";
81
- element.style.padding = "12px 6px";
82
- element.style.border = "1px solid #fff";
83
- element.style.borderRadius = "4px";
84
- element.style.background = "rgba(0,0,0,0.1)";
85
- element.style.color = "#fff";
86
- element.style.font = "normal 13px sans-serif";
87
- element.style.textAlign = "center";
88
- element.style.opacity = "0.5";
89
- element.style.outline = "none";
90
- element.style.zIndex = "999";
39
+ function onSessionEnded() {
40
+ currentSession.removeEventListener("end", onSessionEnded);
41
+ button.textContent = "START AR";
42
+ sessionInit.domOverlay.root.style.display = "none";
43
+ currentSession = null;
91
44
  }
92
- if ("xr" in navigator) {
93
- button.id = "ARButton";
94
- button.style.display = "none";
95
- stylizeElement(button);
96
- navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
97
- supported ? showStartAR() : showARNotSupported();
98
- }).catch(showARNotSupported);
99
- return button;
100
- } else {
101
- const message = document.createElement("a");
102
- if (window.isSecureContext === false) {
103
- message.href = document.location.href.replace(/^http:/, "https:");
104
- message.innerHTML = "WEBXR NEEDS HTTPS";
45
+ button.style.display = "";
46
+ button.style.cursor = "pointer";
47
+ button.style.left = "calc(50% - 50px)";
48
+ button.style.width = "100px";
49
+ button.textContent = "START AR";
50
+ button.onmouseenter = () => {
51
+ button.style.opacity = "1.0";
52
+ };
53
+ button.onmouseleave = () => {
54
+ button.style.opacity = "0.5";
55
+ };
56
+ button.onclick = () => {
57
+ if (currentSession === null) {
58
+ navigator.xr.requestSession("immersive-ar", sessionInit).then(onSessionStarted);
105
59
  } else {
106
- message.href = "https://immersiveweb.dev/";
107
- message.innerHTML = "WEBXR NOT AVAILABLE";
60
+ currentSession.end();
108
61
  }
109
- message.style.left = "calc(50% - 90px)";
110
- message.style.width = "180px";
111
- message.style.textDecoration = "none";
112
- stylizeElement(message);
113
- return message;
62
+ };
63
+ }
64
+ function disableButton() {
65
+ button.style.display = "";
66
+ button.style.cursor = "auto";
67
+ button.style.left = "calc(50% - 75px)";
68
+ button.style.width = "150px";
69
+ button.onmouseenter = null;
70
+ button.onmouseleave = null;
71
+ button.onclick = null;
72
+ }
73
+ function showARNotSupported() {
74
+ disableButton();
75
+ button.textContent = "AR NOT SUPPORTED";
76
+ }
77
+ function stylizeElement(element) {
78
+ element.style.position = "absolute";
79
+ element.style.bottom = "20px";
80
+ element.style.padding = "12px 6px";
81
+ element.style.border = "1px solid #fff";
82
+ element.style.borderRadius = "4px";
83
+ element.style.background = "rgba(0,0,0,0.1)";
84
+ element.style.color = "#fff";
85
+ element.style.font = "normal 13px sans-serif";
86
+ element.style.textAlign = "center";
87
+ element.style.opacity = "0.5";
88
+ element.style.outline = "none";
89
+ element.style.zIndex = "999";
90
+ }
91
+ if ("xr" in navigator) {
92
+ button.id = "ARButton";
93
+ button.style.display = "none";
94
+ stylizeElement(button);
95
+ navigator.xr.isSessionSupported("immersive-ar").then(function(supported) {
96
+ supported ? showStartAR() : showARNotSupported();
97
+ }).catch(showARNotSupported);
98
+ return button;
99
+ } else {
100
+ const message = document.createElement("a");
101
+ if (window.isSecureContext === false) {
102
+ message.href = document.location.href.replace(/^http:/, "https:");
103
+ message.innerHTML = "WEBXR NEEDS HTTPS";
104
+ } else {
105
+ message.href = "https://immersiveweb.dev/";
106
+ message.innerHTML = "WEBXR NOT AVAILABLE";
114
107
  }
108
+ message.style.left = "calc(50% - 90px)";
109
+ message.style.width = "180px";
110
+ message.style.textDecoration = "none";
111
+ stylizeElement(message);
112
+ return message;
115
113
  }
116
114
  }
117
- return ARButton2;
118
- })();
115
+ };
119
116
  export {
120
117
  ARButton
121
118
  };
@@ -1 +1 @@
1
- {"version":3,"file":"ARButton.js","sources":["../../src/webxr/ARButton.ts"],"sourcesContent":["import { WebGLRenderer } from 'three'\n\nconst ARButton = /* @__PURE__ */ (() => {\n class ARButton {\n static createButton(\n renderer: WebGLRenderer,\n sessionInit: XRSessionInit = {},\n ): 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 Navigator)\n .xr!.isSessionSupported('immersive-ar')\n .then(function (supported: boolean) {\n supported ? showStartAR() : showARNotSupported()\n })\n .catch(showARNotSupported)\n\n return button\n } else {\n const message = document.createElement('a')\n\n if (window.isSecureContext === false) {\n message.href = document.location.href.replace(/^http:/, 'https:')\n message.innerHTML = 'WEBXR NEEDS HTTPS' // TODO Improve message\n } else {\n message.href = 'https://immersiveweb.dev/'\n message.innerHTML = 'WEBXR NOT AVAILABLE'\n }\n\n message.style.left = 'calc(50% - 90px)'\n message.style.width = '180px'\n message.style.textDecoration = 'none'\n\n stylizeElement(message)\n\n return message\n }\n }\n }\n\n return ARButton\n})()\n\nexport { ARButton }\n"],"names":["ARButton"],"mappings":"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"}
1
+ {"version":3,"file":"ARButton.js","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 Navigator)\n .xr!.isSessionSupported('immersive-ar')\n .then(function (supported: boolean) {\n supported ? showStartAR() : showARNotSupported()\n })\n .catch(showARNotSupported)\n\n return button\n } else {\n const message = document.createElement('a')\n\n if (window.isSecureContext === false) {\n message.href = document.location.href.replace(/^http:/, 'https:')\n message.innerHTML = 'WEBXR NEEDS HTTPS' // TODO Improve message\n } else {\n message.href = 'https://immersiveweb.dev/'\n message.innerHTML = 'WEBXR NOT AVAILABLE'\n }\n\n message.style.left = 'calc(50% - 90px)'\n message.style.width = '180px'\n message.style.textDecoration = 'none'\n\n stylizeElement(message)\n\n return message\n }\n },\n}\n\nexport { ARButton }\n"],"names":[],"mappings":"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"}
@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
7
7
  };
8
8
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
9
9
  const VRButton = /* @__PURE__ */ (() => {
10
- const _VRButton2 = class {
10
+ const _VRButton = class {
11
11
  static createButton(renderer, sessionInit = {}) {
12
12
  const button = document.createElement("button");
13
13
  function showEnterVR() {
@@ -77,7 +77,7 @@ const VRButton = /* @__PURE__ */ (() => {
77
77
  button.style.display = "none";
78
78
  navigator.xr.isSessionSupported("immersive-vr").then((supported) => {
79
79
  supported ? showEnterVR() : showWebXRNotFound();
80
- if (supported && _VRButton2.xrSessionIsGranted) {
80
+ if (supported && _VRButton.xrSessionIsGranted) {
81
81
  button.click();
82
82
  }
83
83
  });
@@ -101,12 +101,12 @@ const VRButton = /* @__PURE__ */ (() => {
101
101
  static registerSessionGrantedListener() {
102
102
  if (typeof navigator !== "undefined" && "xr" in navigator) {
103
103
  navigator.xr.addEventListener("sessiongranted", () => {
104
- _VRButton2.xrSessionIsGranted = true;
104
+ _VRButton.xrSessionIsGranted = true;
105
105
  });
106
106
  }
107
107
  }
108
108
  };
109
- let VRButton2 = _VRButton2;
109
+ let VRButton2 = _VRButton;
110
110
  __publicField(VRButton2, "xrSessionIsGranted", false);
111
111
  VRButton2.registerSessionGrantedListener();
112
112
  return VRButton2;