109 lines
4.9 KiB
HTML
109 lines
4.9 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>
|
||
<script src="./../../../src/3rd/js/plugin/frontend/tab-to-href.js"></script>
|
||
<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>
|
||
|
||
<a-entity isoterminal="width: 600; height:300" position="0 1.0 0.03"></a-entity>
|
||
|
||
</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
|
||
|
||
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`)
|
||
})
|
||
|
||
isoterminal.el.addEventListener('init', () => {
|
||
// 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
|
||
|
||
// describe mouseover button (and scene to be teleported to, if any)
|
||
xrf.addEventListener('href', (e) => {
|
||
if( typeof e.selected == 'undefined' || !e.mesh ) return; // only process mouse-overs
|
||
let name = "object"
|
||
let info = ""
|
||
let subscene = false
|
||
if( e.mesh.userData ){
|
||
if( e.mesh.userData.href && e.mesh.userData.href.match("pos=") ){
|
||
name = "action: "
|
||
subscene = xrfragment.URI.parse( e.mesh.userData.href ).XRF.pos.string
|
||
info = "to "+ subscene
|
||
}
|
||
if( e.mesh.userData['aria-description'] ){
|
||
info += "\n\r"+sanitizeTranscript(e.mesh.userData['aria-description'])
|
||
}
|
||
if( subscene ){
|
||
info += `\n\r${transcriptToText( xrf.sceneToTranscript(subscene,false,true) )}`
|
||
}
|
||
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>
|