78 lines
4.6 KiB
HTML
78 lines
4.6 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="./../../../dist/aframe.min.js"></script> <!-- v1.5.0 -->
|
|
<script src="./../../../dist/xrfragment.aframe.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<!-- OPTIONAL -->
|
|
<!-- -->
|
|
<!-- everything below is completely optional, but handy to add a quick menu / connectivity to your space -->
|
|
<!-- -->
|
|
<script>
|
|
|
|
document.addEventListener('$menu:ready', (e) => {
|
|
let {$menu} = e.detail
|
|
// add your menubuttons:
|
|
$menu.buttons = $menu.buttons.concat([
|
|
`<a class="btn" aria-label="button" aria-title="menu button" onclick="$menu.showAbout()"><i class="gg-info"></i> about</a><br>`
|
|
])
|
|
$menu.collapsed = false
|
|
$menu.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>
|
|
|
|
|
|
<!-- everything below is completely optional and not part of the spec -->
|
|
|
|
<script src="./../../../dist/aframe-blink-controls.min.js"></script> <!-- teleporting using controllers -->
|
|
<script src="https://cdn.jsdelivr.net/npm/handy-work@3.1.9/build/handy-controls.min.js"></script> <!-- hand controllers -->
|
|
<script src="./../../../dist/xrfragment.plugin.p2p.js"></script> <!-- serverless p2p connectivity -->
|
|
<script src="./../../../dist/xrfragment.plugin.matrix.js"></script> <!-- matrix connectivity -->
|
|
<script src="./../../../dist/xrfragment.plugin.frontend.js"></script> <!-- menu + chat interface -->
|
|
|
|
</body>
|
|
</html>
|