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-12-28 10:46:48 +01:00
< script src = "./../../../dist/aframe.min.js" > < / script > <!-- v1.5.0 -->
< script src = "./../../../dist/xrfragment.aframe.js" > < / script >
2023-12-06 15:20:58 +01:00
2024-03-01 14:35:36 +01:00
<!-- important: allow touchevents in AR -->
< style type = "text/css" > canvas . a-dom-overlay : not ( . a-no-style ) { padding : 0 ; pointer-events : auto ; } < / style >
2023-05-22 18:58:05 +02:00
< / head >
< body >
2024-03-01 14:35:36 +01:00
< a-scene xr-mode-ui = "XRMode: xr"
renderer="colorManagement: true; highRefreshRate:true;"
light="defaultLightsEnabled: false">
< a-entity id = "player" movement-controls touch-controls wasd-controls = "fly:false" look-controls >
2023-12-12 18:09:30 +01:00
< a-entity camera = "fov:90" position = "0 1.6 0" id = "camera" > < / a-entity >
2024-03-12 11:32:59 +01:00
< a-entity id = "left-hand" hand-tracking-controls = "hand:left;modelColor:#cccccc" 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 >
2024-03-12 11:32:59 +01:00
< a-entity id = "right-hand" hand-tracking-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 >
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-12-28 10:46:48 +01:00
<!-- OPTIONAL -->
<!-- -->
<!-- everything below is completely optional, but handy to add a quick menu / connectivity to your space -->
<!-- -->
2023-10-15 13:35:54 +02:00
< script >
2023-12-15 16:23:12 +01:00
2024-01-03 16:55:23 +01:00
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 >
2023-12-21 13:47:28 +01:00
2024-01-03 16:55:23 +01:00
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 >
2024-02-29 10:57:20 +01:00
🎞 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 >
2024-01-03 16:55:23 +01:00
🧑🤝🧑 < 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})
})
2023-05-22 18:58:05 +02:00
< / script >
2024-01-29 21:19:04 +01:00
<!-- everything below is completely optional and not part of the spec -->
2024-03-05 12:56:06 +01:00
< script src = "./../../../dist/aframe-blink-controls.min.js" > < / script > <!-- teleporting using controllers -->
2024-01-03 16:55:23 +01:00
< script src = "./../../../dist/xrfragment.plugin.p2p.js" > < / script > <!-- serverless p2p connectivity -->
< script src = "./../../../dist/xrfragment.plugin.matrix.js" > < / script > <!-- matrix connectivity -->
2024-01-10 22:01:21 +01:00
< script src = "./../../../dist/xrfragment.plugin.frontend.js" > < / script > <!-- menu + chat interface -->
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 >
