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
2024-04-25 17:56:29 +02:00
<!-- AFRAME v1.5.0 + extra THREE.js extra loaders -->
< script src = "./../../../dist/aframe.min.js" > < / script >
2023-12-28 10:46:48 +01:00
< 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"
2024-06-07 09:33:00 +02:00
renderer="colorManagement: false; antialias:true; highRefreshRate:true; foveationLevel: 0.5; toneMapping: ACESFilmic; exposure: 3.0"
2024-03-01 14:35:36 +01:00
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-06-07 09:33:00 +02:00
< a-entity id = "left-hand" hand-tracking-grab-controls = "hand:left;modelColor:#cccccc" 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-06-07 09:33:00 +02:00
< 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 >
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-18 18:14:16 +01:00
< 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 -->
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 >
