xrfragment/example/aframe/sandbox/index.html

94 lines
5.8 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">
<!-- AFRAME v1.5.0 + extra THREE.js extra loaders -->
<script src="./../../../dist/aframe.min.js"></script>
<script src="./../../../dist/xrfragment.aframe.js"></script>
<!-- important: allow touchevents in AR -->
<style type="text/css">
canvas.a-dom-overlay:not(.a-no-style) { padding: 0; pointer-events: auto; }
</style>
</head>
<body>
<a-scene xr-mode-ui="XRMode: xr"
renderer="colorManagement: false; stencil: true; antialias:true; highRefreshRate:true; foveationLevel: 0.5; toneMapping: ACESFilmic; exposure: 3.0"
device-orientation-permission-ui xrf-gaze-always joystick
light="defaultLightsEnabled: false">
<a-entity id="player" movement-controls touch-controls="axis:y" wasd-controls="fly:false" look-controls="magicWindowTrackingEnabled:true">
<a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
<a-entity id="left-hand" hand-tracking-grab-controls="hand:left;modelColor:#cccccc" 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" hand-tracking-grab-controls="hand:right;modelColor:#cccccc" laser-controls="hand: right" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor" xrf-pinchmove="rig: #player"></a-entity>
</a-entity>
<a-entity id="home" xrf="./../../assets/index.glb"></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) => {
// add your menubuttons:
let {$menu} = e.detail
$menu.buttons = $menu.buttons.concat([
`<a class="btn" aria-label="button" aria-title="menu button" onclick="$menu.showAbout()"><i class="gg-info"></i>&nbsp;&nbsp;&nbsp;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>
🎞 interactive <a href="https://www.w3.org/TR/media-frags/" target="_blank">W3C Media Fragments</a> and <a href="https://en.wikipedia.org/wiki/URI_Template" target="_blank">URI Templates</a><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})
frontend.notify_links = true // shows href/src's as notifications when hovering buttons
xrf.navigator.opts.openInNewTab = false // open webpages in new tabs
})
</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="./../../../dist/xrfragment.plugin.p2p.js"></script> <!-- serverless p2p connectivity -->
<script src="./../../../dist/xrfragment.plugin.matrix.js"></script> <!-- matrix connectivity -->
<script src="./../../../dist/xrfragment.plugin.network.js"></script> <!-- matrix and webrtc chat/scene examples -->
<script src="./../../../dist/xrfragment.plugin.editor.js"></script> <!-- basic editor example -->
<script src="./../../../dist/xrfragment.plugin.frontend.css.js"></script> <!-- basic menu interface css -->
<script src="./../../../dist/xrfragment.plugin.frontend.js"></script> <!-- basic menu interface -->
</body>
</html>