2023-05-09 17:42:29 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2023-05-22 18:58:05 +02:00
|
|
|
<head>
|
2023-12-08 13:35:19 +01:00
|
|
|
<title>XR Fragments aframe viewer</title>
|
2023-05-22 18:58:05 +02:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
2023-12-06 15:20:58 +01:00
|
|
|
|
2023-11-16 14:50:57 +01:00
|
|
|
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
|
2023-05-22 18:58:05 +02:00
|
|
|
<script src="./../../../dist/xrfragment.aframe.js"></script>
|
2023-12-06 15:20:58 +01:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
|
|
|
|
|
|
2023-05-22 18:58:05 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-10-13 11:45:17 +02:00
|
|
|
|
2023-12-08 13:35:19 +01:00
|
|
|
<a-scene xr-mode-ui="XRMode: xr" renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
|
2023-12-12 18:09:30 +01:00
|
|
|
<a-entity id="player" wasd-controls look-controls>
|
|
|
|
|
<a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
|
2023-11-29 19:39:31 +01:00
|
|
|
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
|
2023-11-02 18:15:05 +01:00
|
|
|
<a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator">
|
2023-05-22 18:58:05 +02:00
|
|
|
<a-entity id="back" xrf-button="label: <; width:0.05; action: history.back()" position="-0.025 0 0" class="ray"></a-entity>
|
|
|
|
|
<a-entity id="next" xrf-button="label: >; width:0.05; action: history.forward()" position=" 0.025 0 0" class="ray"></a-entity>
|
|
|
|
|
</a-entity>
|
|
|
|
|
</a-entity>
|
2023-11-30 13:25:27 +01:00
|
|
|
<a-entity id="right-hand" laser-controls="hand: right" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #player; collisionEntities: .floor"></a-entity>
|
2023-05-22 18:58:05 +02:00
|
|
|
</a-entity>
|
|
|
|
|
|
2023-12-14 18:13:40 +01:00
|
|
|
<a-entity id="home" xrf="index.glb" xrf-menu></a-entity>
|
2023-05-09 17:42:29 +02:00
|
|
|
</a-scene>
|
|
|
|
|
|
2023-10-15 13:35:54 +02:00
|
|
|
<script>
|
2023-12-14 18:13:40 +01:00
|
|
|
// add your logo
|
|
|
|
|
XRFMENU.logo = './../../assets/logo.png'
|
|
|
|
|
XRFMENU.morelabel = '⚡'
|
|
|
|
|
// add your menubuttons:
|
|
|
|
|
XRFMENU.html.push(`<a class="btn" aria-label="button" aria-description="help menu" onclick="window.showHelp()">💁 help?</a><br>`)
|
|
|
|
|
showHelp = () => window.notify(`
|
|
|
|
|
<h1>💁 Hi there!</h1>
|
|
|
|
|
This XR experience works on almost any device.<br>
|
|
|
|
|
Though, the best is with AR/VR headsets ♥️<br><br>
|
|
|
|
|
<table>
|
|
|
|
|
${
|
|
|
|
|
$$('.footer>.btn').map( (btn) => {
|
|
|
|
|
let info = btn.getAttribute("aria-description")
|
|
|
|
|
return info && info != "help menu" ? `<tr><td>${btn.outerHTML}</td><td>${info}</td></tr>` : ''
|
|
|
|
|
}).join('\n')
|
|
|
|
|
}
|
|
|
|
|
</table>
|
|
|
|
|
<b>This uses only open standards:</b><br>
|
|
|
|
|
📦 simply surf hyperlinked 3D model files<br>
|
|
|
|
|
🚫 no proprietary tech/game-engines<br>
|
|
|
|
|
🔗 <a href="https://xrfragment.org" target="_blank">XR Fragments</a> for links & navigation<br>
|
|
|
|
|
📷 Serverless <a href="https://webrtc.org" target="_blank">P2P WebRTC</a><br>
|
|
|
|
|
🅰 <a href="https://aframe.io" target="_blank">AFRAME</a> + <a href="https://three.org" target="_blank">Three.js</a> for <a href="https://immersiveweb.dev" target="_blank">WebXR</a><br>
|
|
|
|
|
🙉 go selfhost <a href="https://github.com/coderofsalvation/xrfragment-helloworld">worlds-in-a-webpage</a><br>
|
|
|
|
|
♥️ Be sustainable: go 100% <a href="https://www.forbes.com/sites/adrianbridgwater/2023/02/06/the-future-for-open-source/" target="_blank">opensource</a>
|
|
|
|
|
<br><br>
|
|
|
|
|
<a href="https://nlnet.nl" target="_blank">
|
|
|
|
|
<img src="https://nlnet.nl/image/logo_nlnet.svg" width="100"/>
|
|
|
|
|
</a>
|
|
|
|
|
<br><br>
|
|
|
|
|
`,{timeout:40000})
|
2023-05-22 18:58:05 +02:00
|
|
|
</script>
|
2023-12-13 19:09:58 +01:00
|
|
|
|
2023-05-22 18:58:05 +02:00
|
|
|
</body>
|
2023-05-09 17:42:29 +02:00
|
|
|
</html>
|
