wip: webxr client
This commit is contained in:
parent
5f05ed03b6
commit
ef5368a5a8
12 changed files with 317 additions and 7 deletions
49
clients/webxr/aframe/index.js
Normal file
49
clients/webxr/aframe/index.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
|
||||
import * as xrforge from './plugin.xrforge.js';
|
||||
import * as level0 from 'xrf/level0';
|
||||
|
||||
const widget = new Proxy({
|
||||
|
||||
backend: null,
|
||||
player: document.querySelector("#player"),
|
||||
src: document.location.search.substr(1),
|
||||
ext: {},
|
||||
|
||||
init(opts){
|
||||
for( var i in opts) this[i] = opts[i]
|
||||
},
|
||||
|
||||
play(){
|
||||
// set URL
|
||||
player.setAttribute("gltf-model", `url(${widget.src})` )
|
||||
|
||||
document.querySelector("#btn_play").style.display = 'none'
|
||||
|
||||
let script = document.createElement("script")
|
||||
script.src = "https://aframe.io/releases/1.7.0/aframe.min.js"
|
||||
document.head.appendChild(script)
|
||||
|
||||
script = document.createElement("script")
|
||||
script.src = "backend.xrforge.js"
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
get(me,k){ return me[k] },
|
||||
|
||||
set(me,k,v){
|
||||
me[k] = v
|
||||
return true
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
xrforge.init(widget)
|
||||
//level0.init(widget)
|
||||
|
||||
document.querySelector("#btn_play").addEventListener("click", () => widget.play() )
|
||||
|
||||
//document.body.style.background = `url(${src.replace( /\.(glb|usdz|gltf|obj|col)$/ , ".png")})`
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
44
clients/webxr/dist/xrforge.html
vendored
Normal file
44
clients/webxr/dist/xrforge.html
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!-- Saved from local source at 2025-10-03T11:36:27Z using monolith v2.10.1 -->
|
||||
<!DOCTYPE html><html><head>
|
||||
<style type="text/css">
|
||||
|
||||
body{
|
||||
background: #555;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img#btn_play:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
img#btn_play {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width:30.000002%;
|
||||
max-width:400px;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="module" crossorigin="" src="data:module;base64,Ly8gdmlld2VyL3BsdWdpbi54cmZvcmdlLmpzCmZ1bmN0aW9uIGluaXQod2lkZ2V0MikgewogIGluZmVyU291cmNlKHdpZGdldDIuc3JjKTsKfQphc3luYyBmdW5jdGlvbiBpbmZlclNvdXJjZShzcmMpIHsKICByZXNwb25zZSA9IGF3YWl0IGZldGNoKHNyYywgewogICAgbWV0aG9kOiAiSEVBRCIKICB9KTsKICBpZiAoIXJlc3BvbnNlLm9rKSB7CiAgICB0aHJvdyBuZXcgRXJyb3IoYEhUVFAgZXJyb3IhIHN0YXR1czogJHtyZXNwb25zZS5zdGF0dXN9YCk7CiAgfQogIGNvbnRlbnREaXNwb3NpdGlvbiA9IHJlc3BvbnNlLmhlYWRlcnMuZ2V0KCJDb250ZW50LURpc3Bvc2l0aW9uIik7CiAgY29uc29sZS5sb2cod2lkZ2V0LnNyYyk7CiAgd2lkZ2V0LnNyYyA9IGV4dHJhY3RGaWxlbmFtZShjb250ZW50RGlzcG9zaXRpb24pOwogIGNvbnNvbGUubG9nKCJkZXRlY3RlZDogIiArIHdpZGdldC5zcmMpOwp9CmZ1bmN0aW9uIGV4dHJhY3RGaWxlbmFtZShjb250ZW50RGlzcG9zaXRpb25IZWFkZXIpIHsKICBjb25zdCB1dGY4TWF0Y2ggPSBjb250ZW50RGlzcG9zaXRpb25IZWFkZXIubWF0Y2goL2ZpbGVuYW1lXCo9KD86dXRmLTh8VVRGLTgpJycoLis/KSg/Ojt8JCkvaSk7CiAgaWYgKHV0ZjhNYXRjaCAmJiB1dGY4TWF0Y2hbMV0pIHsKICAgIHJldHVybiBkZWNvZGVVUklDb21wb25lbnQodXRmOE1hdGNoWzFdLnRyaW0oKSk7CiAgfQogIGNvbnN0IGJhc2ljTWF0Y2ggPSBjb250ZW50RGlzcG9zaXRpb25IZWFkZXIubWF0Y2goL2ZpbGVuYW1lPSIoLis/KSIvaSk7CiAgaWYgKGJhc2ljTWF0Y2ggJiYgYmFzaWNNYXRjaFsxXSkgewogICAgcmV0dXJuIGJhc2ljTWF0Y2hbMV0udHJpbSgpOwogIH0KICByZXR1cm4gbnVsbDsKfQoKLy8gdmlld2VyL2luZGV4LmpzCnZhciB3aWRnZXQyID0gbmV3IFByb3h5KHsKICBiYWNrZW5kOiBudWxsLAogIHBsYXllcjogZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiI3BsYXllciIpLAogIHNyYzogZG9jdW1lbnQubG9jYXRpb24uc2VhcmNoLnN1YnN0cigxKSwKICBleHQ6IHt9LAogIGluaXQob3B0cykgewogICAgZm9yICh2YXIgaSBpbiBvcHRzKQogICAgICB0aGlzW2ldID0gb3B0c1tpXTsKICB9LAogIHBsYXkoKSB7CiAgICBwbGF5ZXIuc2V0QXR0cmlidXRlKCJnbHRmLW1vZGVsIiwgYHVybCgke3dpZGdldDIuc3JjfSlgKTsKICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIiNidG5fcGxheSIpLnN0eWxlLmRpc3BsYXkgPSAibm9uZSI7CiAgICBsZXQgc2NyaXB0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7CiAgICBzY3JpcHQuc3JjID0gImh0dHBzOi8vYWZyYW1lLmlvL3JlbGVhc2VzLzEuNy4wL2FmcmFtZS5taW4uanMiOwogICAgZG9jdW1lbnQuaGVhZC5hcHBlbmRDaGlsZChzY3JpcHQpOwogICAgc2NyaXB0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgic2NyaXB0Iik7CiAgICBzY3JpcHQuc3JjID0gImJhY2tlbmQueHJmb3JnZS5qcyI7CiAgICBkb2N1bWVudC5oZWFkLmFwcGVuZENoaWxkKHNjcmlwdCk7CiAgfQp9LCB7CiAgZ2V0KG1lLCBrKSB7CiAgICByZXR1cm4gbWVba107CiAgfSwKICBzZXQobWUsIGssIHYpIHsKICAgIG1lW2tdID0gdjsKICAgIHJldHVybiB0cnVlOwogIH0KfSk7CmluaXQod2lkZ2V0Mik7CmRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoIiNidG5fcGxheSIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgKCkgPT4gd2lkZ2V0Mi5wbGF5KCkpOwo="></script><meta name="robots" content="none"></meta></head>
|
||||
<body>
|
||||
|
||||
<img id="btn_play" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTguNzUyIDU4Ljc1MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTguNzUyIDU4Ljc1MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggc3Ryb2tlPSIjQ0NDIiBzdHJva2Utb3BhY2l0eT0iMC41IiBmaWxsPSJ3aGl0ZSIgZD0iTTUyLjUyNCwyMy45MjVMMTIuNTA3LDAuODI0Yy0xLjkwNy0xLjEtNC4zNzYtMS4wOTctNi4yNzYsMEM0LjI5MywxLjk0LDMuMDg4LDQuMDI1LDMuMDg4LDYuMjY0djQ2LjIwNQ0KCQljMCwyLjI0LDEuMjA0LDQuMzI1LDMuMTMxLDUuNDM1YzAuOTUzLDAuNTU1LDIuMDQyLDAuODQ4LDMuMTQ5LDAuODQ4YzEuMTA0LDAsMi4xOTItMC4yOTIsMy4xNDEtMC44NDNsNDAuMDE3LTIzLjEwMw0KCQljMS45MzYtMS4xMTksMy4xMzgtMy4yMDMsMy4xMzgtNS40MzlDNTUuNjYzLDI3LjEzNCw1NC40NjIsMjUuMDUsNTIuNTI0LDIzLjkyNXogTTQ5LjUyNCwyOS42MTJMOS41MDQsNTIuNzE2DQoJCWMtMC4wODIsMC4wNDctMC4xOCwwLjA1Mi0wLjI3OS0wLjAwNWMtMC4wODQtMC4wNDktMC4xMzctMC4xNDItMC4xMzctMC4yNDJWNi4yNjNjMC0wLjEsMC4wNTItMC4xOTIsMC4xNC0wLjI0Mw0KCQljMC4wNDItMC4wMjUsMC4wOS0wLjAzOCwwLjEzOS0wLjAzOGMwLjA1MSwwLDAuMDk5LDAuMDEzLDAuMTQyLDAuMDM4bDQwLjAxLDIzLjA5OGMwLjA4OSwwLjA1MiwwLjE0NSwwLjE0NywwLjE0NSwwLjI0OQ0KCQlDNDkuNjYzLDI5LjQ3LDQ5LjYxMSwyOS41NjEsNDkuNTI0LDI5LjYxMnoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K">
|
||||
|
||||
<a-scene>
|
||||
<a-entity id="player" animation-mixer_disabled="" gltf-model=""></a-entity>
|
||||
</a-scene>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
43
clients/webxr/dist/xrforge/play-c89r1cs1.svg
vendored
Normal file
43
clients/webxr/dist/xrforge/play-c89r1cs1.svg
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 58.752 58.752" style="enable-background:new 0 0 58.752 58.752;" xml:space="preserve">
|
||||
<g>
|
||||
<path stroke="#CCC" stroke-opacity="0.5" fill="white" d="M52.524,23.925L12.507,0.824c-1.907-1.1-4.376-1.097-6.276,0C4.293,1.94,3.088,4.025,3.088,6.264v46.205
|
||||
c0,2.24,1.204,4.325,3.131,5.435c0.953,0.555,2.042,0.848,3.149,0.848c1.104,0,2.192-0.292,3.141-0.843l40.017-23.103
|
||||
c1.936-1.119,3.138-3.203,3.138-5.439C55.663,27.134,54.462,25.05,52.524,23.925z M49.524,29.612L9.504,52.716
|
||||
c-0.082,0.047-0.18,0.052-0.279-0.005c-0.084-0.049-0.137-0.142-0.137-0.242V6.263c0-0.1,0.052-0.192,0.14-0.243
|
||||
c0.042-0.025,0.09-0.038,0.139-0.038c0.051,0,0.099,0.013,0.142,0.038l40.01,23.098c0.089,0.052,0.145,0.147,0.145,0.249
|
||||
C49.663,29.47,49.611,29.561,49.524,29.612z"/>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
59
clients/webxr/dist/xrforge/xrforge-gent5bnt.js
vendored
Normal file
59
clients/webxr/dist/xrforge/xrforge-gent5bnt.js
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
// viewer/plugin.xrforge.js
|
||||
function init(widget2) {
|
||||
inferSource(widget2.src);
|
||||
}
|
||||
async function inferSource(src) {
|
||||
response = await fetch(src, {
|
||||
method: "HEAD"
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
contentDisposition = response.headers.get("Content-Disposition");
|
||||
console.log(widget.src);
|
||||
widget.src = extractFilename(contentDisposition);
|
||||
console.log("detected: " + widget.src);
|
||||
}
|
||||
function extractFilename(contentDispositionHeader) {
|
||||
const utf8Match = contentDispositionHeader.match(/filename\*=(?:utf-8|UTF-8)''(.+?)(?:;|$)/i);
|
||||
if (utf8Match && utf8Match[1]) {
|
||||
return decodeURIComponent(utf8Match[1].trim());
|
||||
}
|
||||
const basicMatch = contentDispositionHeader.match(/filename="(.+?)"/i);
|
||||
if (basicMatch && basicMatch[1]) {
|
||||
return basicMatch[1].trim();
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// viewer/index.js
|
||||
var widget2 = new Proxy({
|
||||
backend: null,
|
||||
player: document.querySelector("#player"),
|
||||
src: document.location.search.substr(1),
|
||||
ext: {},
|
||||
init(opts) {
|
||||
for (var i in opts)
|
||||
this[i] = opts[i];
|
||||
},
|
||||
play() {
|
||||
player.setAttribute("gltf-model", `url(${widget2.src})`);
|
||||
document.querySelector("#btn_play").style.display = "none";
|
||||
let script = document.createElement("script");
|
||||
script.src = "https://aframe.io/releases/1.7.0/aframe.min.js";
|
||||
document.head.appendChild(script);
|
||||
script = document.createElement("script");
|
||||
script.src = "backend.xrforge.js";
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
}, {
|
||||
get(me, k) {
|
||||
return me[k];
|
||||
},
|
||||
set(me, k, v) {
|
||||
me[k] = v;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
init(widget2);
|
||||
document.querySelector("#btn_play").addEventListener("click", () => widget2.play());
|
||||
44
clients/webxr/dist/xrforge/xrforge.html
vendored
Normal file
44
clients/webxr/dist/xrforge/xrforge.html
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
|
||||
body{
|
||||
background: #555;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img#btn_play:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
img#btn_play {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width:30%;
|
||||
max-width:400px;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="module" crossorigin src="./xrforge-gent5bnt.js"></script></head>
|
||||
<body>
|
||||
|
||||
<img id="btn_play" src="./play-c89r1cs1.svg" />
|
||||
|
||||
<a-scene>
|
||||
<a-entity id="player" animation-mixer_disabled gltf-model></a-entity>
|
||||
</a-scene>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
28
clients/webxr/package-lock.json
generated
Normal file
28
clients/webxr/package-lock.json
generated
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "webxr",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "webxr",
|
||||
"version": "1.0.0",
|
||||
"license": "AGPL3",
|
||||
"dependencies": {
|
||||
"xrf": "^0.0.1"
|
||||
}
|
||||
},
|
||||
"../../../xrfragment/xrf.js": {
|
||||
"name": "xrf",
|
||||
"version": "0.0.1",
|
||||
"extraneous": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/xrf": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/xrf/-/xrf-0.0.1.tgz",
|
||||
"integrity": "sha512-uYa8M73z45DRTymga+48gTDEeur+iM3jPktVBnaOHopb17VvZxJ6yZy6TAhMURMrliHB48mYUUSC5J5NRF8wZA==",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,10 +3,11 @@
|
|||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
"build": "npm run build-xrforge",
|
||||
"build-xrforge": "mkdir -p dist/xrforge && bun build --outdir=dist/xrforge xrforge.html && monolith dist/xrforge/xrforge.html --output dist/xrforge.html"
|
||||
},
|
||||
"author": "Leon van Kammen",
|
||||
"license": "AGPL3",
|
||||
"license": "",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"xrf": "^0.0.1"
|
||||
|
|
|
|||
|
|
@ -12,15 +12,13 @@
|
|||
nativeBuildInputs = with pkgs.buildPackages; [
|
||||
|
||||
nodejs_20
|
||||
monolith
|
||||
bun
|
||||
|
||||
];
|
||||
|
||||
shellHook = ''
|
||||
|
||||
# install bun
|
||||
alias bun="steam-run ~/.bun/bin/bun"
|
||||
test -f ~/.bun/bin/bun || curl -fsSL https://bun.com/install | bash -s "bun-v1.2.22"
|
||||
|
||||
export NIX_SHELL_DEV=1
|
||||
export NIX_XRFORGE_WEBXR=1
|
||||
'';
|
||||
}
|
||||
44
clients/webxr/xrforge.html
Normal file
44
clients/webxr/xrforge.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
|
||||
body{
|
||||
background: #555;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img#btn_play:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
img#btn_play {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width:30%;
|
||||
max-width:400px;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
transition: 0.3s;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img id="btn_play" src="viewer/play.svg"/>
|
||||
|
||||
<a-scene>
|
||||
<a-entity id="player" animation-mixer_disabled gltf-model></a-entity>
|
||||
</a-scene>
|
||||
|
||||
<script type="module" src="aframe/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue