three-stdlib 2.35.4 → 2.35.6
Sign up to get free protection for your applications and to get access to all the features.
- package/exporters/DRACOExporter.cjs +3 -3
- package/exporters/DRACOExporter.cjs.map +1 -1
- package/exporters/DRACOExporter.d.ts +36 -25
- package/exporters/DRACOExporter.js +3 -3
- package/exporters/DRACOExporter.js.map +1 -1
- package/objects/Sky.cjs.map +1 -1
- package/objects/Sky.d.ts +18 -137
- package/objects/Sky.js.map +1 -1
- package/package.json +1 -1
- package/webxr/ARButton.cjs +106 -109
- package/webxr/ARButton.cjs.map +1 -1
- package/webxr/ARButton.d.ts +0 -1
- package/webxr/ARButton.js +106 -109
- package/webxr/ARButton.js.map +1 -1
- package/webxr/VRButton.cjs +4 -4
- package/webxr/VRButton.cjs.map +1 -1
- package/webxr/VRButton.d.ts +11 -9
- package/webxr/VRButton.js +4 -4
- package/webxr/VRButton.js.map +1 -1
package/webxr/ARButton.cjs
CHANGED
|
@@ -1,122 +1,119 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ARButton =
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
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
|
-
|
|
34
|
-
|
|
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
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
button.
|
|
73
|
-
|
|
74
|
-
|
|
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
|
|
77
|
-
|
|
78
|
-
button.textContent = "AR
|
|
79
|
-
|
|
80
|
-
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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
|
-
|
|
109
|
-
message.innerHTML = "WEBXR NOT AVAILABLE";
|
|
62
|
+
currentSession.end();
|
|
110
63
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
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
|
-
|
|
120
|
-
})();
|
|
117
|
+
};
|
|
121
118
|
exports.ARButton = ARButton;
|
|
122
119
|
//# sourceMappingURL=ARButton.cjs.map
|
package/webxr/ARButton.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ARButton.cjs","sources":["../../src/webxr/ARButton.ts"],"sourcesContent":["import { WebGLRenderer } from 'three'\n\nconst ARButton =
|
|
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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"}
|
package/webxr/ARButton.d.ts
CHANGED
package/webxr/ARButton.js
CHANGED
|
@@ -1,121 +1,118 @@
|
|
|
1
|
-
const ARButton =
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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
|
-
|
|
32
|
-
|
|
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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
button.
|
|
71
|
-
|
|
72
|
-
|
|
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
|
|
75
|
-
|
|
76
|
-
button.textContent = "AR
|
|
77
|
-
|
|
78
|
-
|
|
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
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
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
|
-
|
|
107
|
-
message.innerHTML = "WEBXR NOT AVAILABLE";
|
|
60
|
+
currentSession.end();
|
|
108
61
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
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
|
-
|
|
118
|
-
})();
|
|
115
|
+
};
|
|
119
116
|
export {
|
|
120
117
|
ARButton
|
|
121
118
|
};
|
package/webxr/ARButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ARButton.js","sources":["../../src/webxr/ARButton.ts"],"sourcesContent":["import { WebGLRenderer } from 'three'\n\nconst ARButton =
|
|
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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"}
|
package/webxr/VRButton.cjs
CHANGED
|
@@ -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
|
|
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 &&
|
|
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
|
-
|
|
104
|
+
_VRButton.xrSessionIsGranted = true;
|
|
105
105
|
});
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
|
-
let VRButton2 =
|
|
109
|
+
let VRButton2 = _VRButton;
|
|
110
110
|
__publicField(VRButton2, "xrSessionIsGranted", false);
|
|
111
111
|
VRButton2.registerSessionGrantedListener();
|
|
112
112
|
return VRButton2;
|