66 lines
3.7 KiB
HTML
66 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>XR Fragments aframe viewer</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
|
|
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<script src="./../../../dist/xrfragment.aframe.js"></script>
|
|
<script src="./../../../dist/xrfragment.extras.js"></script>
|
|
|
|
<a-scene xr-mode-ui="XRMode: xr" renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
|
|
<a-entity id="player" wasd-controls look-controls>
|
|
<a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
|
|
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
|
|
<a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator">
|
|
<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>
|
|
<a-entity id="right-hand" laser-controls="hand: right" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #player; collisionEntities: .floor"></a-entity>
|
|
</a-entity>
|
|
|
|
<a-entity id="home" xrf="index.glb" xrf-menu></a-entity>
|
|
</a-scene>
|
|
|
|
<script>
|
|
// the xrfmenu is totally optional but can be handy
|
|
// to quickly add your logo & buttons etc
|
|
XRFMENU.logo = './../../assets/logo.png'
|
|
XRFMENU.morelabel = '⚡'
|
|
// add your menubuttons:
|
|
XRFMENU.buttons = XRFMENU.buttons.concat([`<a class="btn" aria-label="button" aria-description="about menu" onclick="XRFMENU.showAbout()">💁 about</a><br>`])
|
|
XRFMENU.collapsed = false
|
|
XRFMENU.showAbout = () => window.notify(`
|
|
<h1>💁 Hi there!</h1>
|
|
|
|
This XR fragments experience works almost anywhere.<br>
|
|
Allowing rich audiovisual events with(out)<br>
|
|
VR/AR headsets (it's awesome though ♥️)<br>
|
|
<br>
|
|
<b>This uses only open standards:</b><br>
|
|
📦 surf 3D models using URLs<br>
|
|
🧑🤝🧑 <b>instant</b> meetings inside hyperlinked 3D models<br>
|
|
🚫 <b>zero proprietary</b> tech/game engines or platforms<br>
|
|
🙈 unhosted, privacy-friendly, avatar-agnostic scenes<br>
|
|
🔗 <a href="https://xrfragment.org" target="_blank">XR Fragments</a> for 3D <b>hyper-linking</b> & navigation<br>
|
|
📷 Serverless & encrypted <a href="https://webrtc.org" target="_blank">P2P WebRTC</a> using <a href="https://github.com/dmotz/trystero" target="_blank">trystero</a><br>
|
|
🦍 <a href="https://immersiveweb.dev" target="_blank">WebXR</a> using <a href="https://aframe.io" target="_blank">AFRAME</a> + <a href="https://three.org" target="_blank">Three.js</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:false})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|