2025-02-08 20:17:21 +01:00
|
|
|
|
<!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>
|
2025-02-10 21:11:34 +01:00
|
|
|
|
<script src="./../../../src/3rd/js/plugin/frontend/tab-to-href.js"></script>
|
2025-02-08 20:17:21 +01:00
|
|
|
|
<script src="https://xrsh.isvery.ninja/xrsh.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>
|
2025-02-11 12:00:55 +01:00
|
|
|
|
|
|
|
|
|
|
<a-entity isoterminal="width: 600; height:300" position="0 1.0 0.03"></a-entity>
|
|
|
|
|
|
|
2025-02-08 20:17:21 +01:00
|
|
|
|
</a-entity>
|
|
|
|
|
|
|
|
|
|
|
|
<a-entity id="home" xrf="./../../assets/elearning.glb"></a-entity>
|
|
|
|
|
|
</a-scene>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- initialize XRSH -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.querySelector('a-scene').addEventListener('isoterminal_init', function(e){
|
|
|
|
|
|
|
|
|
|
|
|
const isoterminal = document.querySelector('[isoterminal]').components.isoterminal
|
|
|
|
|
|
|
2025-02-10 21:11:34 +01:00
|
|
|
|
const sanitizeTranscript = (str) => {
|
|
|
|
|
|
return str
|
|
|
|
|
|
.replaceAll("<[^>]*>", "") // strip html
|
|
|
|
|
|
.split('\n')
|
|
|
|
|
|
.map( (l) => String(l+'.').replace(/(^|:|;|!|\?|\.)\.$/g,'\$1') ) // add dot if needed
|
|
|
|
|
|
.join('. ')
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const transcriptToText = (t) => t.map( (o) => `[36m${o.name}[0m ${o.description}`).join(" ")
|
|
|
|
|
|
|
|
|
|
|
|
// describe current scene
|
|
|
|
|
|
xrf.addEventListener('navigateLoaded', () => {
|
|
|
|
|
|
let subscene = xrf.frag.pos.last || xrf.navigator.URI.XRF?.pos?.string
|
|
|
|
|
|
subscene = subscene ? subscene = xrf.scene.getObjectByName( subscene ) : false
|
|
|
|
|
|
let transcript = transcriptToText( xrf.sceneToTranscript(subscene) )
|
|
|
|
|
|
term.send(`\r${transcript}\n\r`)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2025-02-08 20:17:21 +01:00
|
|
|
|
isoterminal.el.addEventListener('init', () => {
|
2025-02-10 21:11:34 +01:00
|
|
|
|
// clear bootmenu-array
|
|
|
|
|
|
// see com/isoterminal/feat/boot.REPL.*.js for REPL examples
|
|
|
|
|
|
ISOTerminal.prototype.boot.menu = []
|
|
|
|
|
|
|
|
|
|
|
|
// we've received our terminal \o/
|
|
|
|
|
|
term = window.term = isoterminal.term
|
2025-02-08 20:17:21 +01:00
|
|
|
|
|
2025-02-10 21:11:34 +01:00
|
|
|
|
// describe mouseover button (and scene to be teleported to, if any)
|
2025-02-08 20:17:21 +01:00
|
|
|
|
xrf.addEventListener('href', (e) => {
|
|
|
|
|
|
if( typeof e.selected == 'undefined' || !e.mesh ) return; // only process mouse-overs
|
2025-02-10 21:11:34 +01:00
|
|
|
|
let name = "object"
|
|
|
|
|
|
let info = ""
|
|
|
|
|
|
let subscene = false
|
2025-02-08 20:17:21 +01:00
|
|
|
|
if( e.mesh.userData ){
|
|
|
|
|
|
if( e.mesh.userData.href && e.mesh.userData.href.match("pos=") ){
|
2025-02-10 21:11:34 +01:00
|
|
|
|
name = "action: "
|
|
|
|
|
|
subscene = xrfragment.URI.parse( e.mesh.userData.href ).XRF.pos.string
|
|
|
|
|
|
info = "to "+ subscene
|
2025-02-08 20:17:21 +01:00
|
|
|
|
}
|
|
|
|
|
|
if( e.mesh.userData['aria-description'] ){
|
2025-02-10 21:11:34 +01:00
|
|
|
|
info += "\n\r"+sanitizeTranscript(e.mesh.userData['aria-description'])
|
|
|
|
|
|
}
|
|
|
|
|
|
if( subscene ){
|
|
|
|
|
|
info += `\n\r${transcriptToText( xrf.sceneToTranscript(subscene,false,true) )}`
|
2025-02-08 20:17:21 +01:00
|
|
|
|
}
|
|
|
|
|
|
if( !info && e.mesh.name ) name = e.mesh.name
|
|
|
|
|
|
}
|
|
|
|
|
|
term.send(`\r\n${name} ${info}\n\r`)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- everything below is completely optional and not part of the spec -->
|
|
|
|
|
|
|
|
|
|
|
|
<script src="./../../../dist/aframe-blink-controls.min.js"></script> <!-- teleporting using controllers -->
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
