<!DOCTYPE html>
< html >
< title > SpaSca : Spatial Scaffolding< / title >
< head >
<!-- Suggestions? https://git.benetou.fr/utopiah/text - code - xr - engine/issues/ -->
<!-- <script src='dependencies/aframe.min.js'></script> -->
< script src = 'dependencies/aframe.offline.min.js' > < / script >
< script src = "dependencies/a-console.js" > < / script >
< script src = 'dependencies/aframe-html.js' > < / script >
< script src = 'dependencies/aframe-mirror.js' > < / script >
< script src = 'dependencies/aframe-troika-text.min.js' > < / script >
<!-- <script type="module" id=immersbundle src='dependencies/immers - client.js?save=true'></script> -->
<!-- <script type="module" id=immersbundle src="https://cdn.jsdelivr.net/npm/immers - client/dist/destination.bundle.js?role=modFull"></script> -->
<!-- <script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script> -->
< script src = "dependencies/shiki0.14.1.js" > < / script >
<!-- for input sharing -->
< script src = 'dependencies/peerjs.min.js' > < / script >
<!-- for content sharing, using NAF
< script src = 'dependencies/socket.io.slim.js' > < / script >
< script src = "https://naf.benetou.fr/easyrtc/easyrtc.js" > < / script >
< script src = 'dependencies/networked-aframe.min.js' > < / script >
-->
< script src = "dependencies/aframe-physics-system.min.js" > < / script >
<!-- still experimenting, see webdav.html -->
< script src = 'dependencies/webdav.js' > < / script >
< script src = 'jxr.js?#123' > < / script >
<!-- replacing with local copies as CDNs are like unpkg tend to be slow
< script type = "module" src = "https://unpkg.com/immers-client/dist/destination.bundle.js" > < / script >
< script src = "https://aframe.io/releases/1.3.0/aframe.min.js" > < / script >
< script src = "https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js" > < / script >
< script src = "aframe-html.js" > < / script >
< script src = "https://unpkg.com/peerjs@1.4.5/dist/peerjs.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.4.0/socket.io.slim.js" > < / script >
< script src = "https://naf.benetou.fr/easyrtc/easyrtc.js" > < / script >
< script src = "https://unpkg.com/networked-aframe@^0.10.0/dist/networked-aframe.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/aframe-mirror@latest/index.js" > < / script >
-->
< link rel = "apple-touch-icon" sizes = "180x180" href = "apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "favicon-16x16.png" >
< link rel = "manifest" href = "site.webmanifest" >
< / head >
< body >
< div style = 'position:fixed;z-index:1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee; ' >
< a href = "https://git.benetou.fr/utopiah/text-code-xr-engine/issues/" >
< img style = 'position:fixed;left:10px;' title = 'code repository' src = 'gitea_logo.svg' >
< / a >
< / div >
< div >
< div id = "observablehq-numberOfPages-835aa7e9" > < / div >
< div id = "observablehq-result_as_html-ab4c1560" > < / div >
< / div >
< div id = "observablehq-key" >
< div id = "observablehq-viewof-offsetExample-ab4c1560" > < / div >
< div id = "observablehq-result_as_html-ab4c1560" > < / div >
< / div >
< button id = mainbutton style = "display:none; z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick = "startExperience()" > Start the experience (hand tracking recommended)< / button >
< a-scene cursor = "rayOrigin: mouse" raycaster = "objects: [html]; interval:100;" adjust-height-in-vr
startfunctions
toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json>
<!-- screenstack dynamic - view selectionboxonpinches glossary timeline issues fot
networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;"
refresh-text-content-from-wiki-page="pagename:TestingPairCollaboration"
-->
< a-assets >
< template id = "avatar-template" > < a-cylinder opacity = .3 scale = ".2 1.2 .2" networked-audio-source > < / a-cylinder > < / template >
< template id = "left-hand-default-template" >
< a-entity networked-hand-controls = "hand:left" > < / a-entity >
< / template >
< template id = "right-hand-default-template" >
< a-entity networked-hand-controls = "hand:right" > < / a-entity >
< / template >
< / a-assets >
< a-entity id = "rig" >
< a-entity id = "player" networked = "template:#avatar-template;attachTemplateToLocal:false;"
hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0">< / a-entity >
< a-entity id = "rightHand" pinchprimary hand-tracking-controls = "hand: right;" > < / a-entity >
< a-entity id = "leftHand" pinchsecondary wristattachsecondary = "target: #box" hand-tracking-controls = "hand: left;" > < / a-entity >
< / a-entity >
< a-box pressable start-on-press id = "box" scale = "0.05 0.05 0.05" color = "pink" >
< a-entity collider-check raycaster = "objects: .collidable; showLine:true;" > < / a-entity >
< / a-box >
<!-- could attach functions here... BUT then they have to be activable with the other hand! -->
<!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->
< a-entity light = "type: ambient; color: #BBB; intensity: 0.6" > < / a-entity >
< a-entity light = "type: directional; color: #FFF; intensity: 1.4" position = "-0.5 1 1" > < / a-entity >
< a-troika-text value = "SpaSca : Spatial Scaffolding" anchor = "left" outline-width = "5%" font = "../content/ChakraPetch-Regular.ttf" position = "-5.26197 6.54224 -1.81284"
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb">< / a-troika-text >
< a-sky hide-on-enter-ar color = "lightgray" > < / a-sky >
< a-entity hide-on-enter-ar = "" id = "environment" class = "hidableenvironment" > < / a-entity >
< a-entity hide-on-enter-ar = "" id = "environmentsky" class = "hidableenvironment" > < / a-entity >
< a-troika-text anchor = left target value = "instructions : \n--right pinch to move\n--left pinch to execute" position = "0 0.65 -0.2" scale = "0.1 0.1 0.1" > < / a-troika-text >
<!--
< a-troika-text anchor = left target id = "startdraw2d" annotation = "content:dessiner en 2D;back:aide a venir;"
value="jxr startDraw2D()" position="0 1.45 -1" scale="0.1 0.1 0.1">< / a-troika-text >
< a-troika-text anchor = left target id = "mvxo" annotation = "content:pengouin pas sud;back:aide a venir;"
value='jxr qs #penguin ga position .x--' position="0 1.45 -0.1" scale="0.1 0.1 0.1">< / a-troika-text >
< a-troika-text anchor = left target id = "mvz" annotation = "content:pengouin pas est;back:aide a venir;"
value='jxr qs #penguin ga position .z++' position="0 1.35 -0.1" scale="0.1 0.1 0.1">< / a-troika-text >
< a-troika-text anchor = left target id = "mvzo" annotation = "content:pengouin pas ouest;back:aide a venir;"
value='jxr qs #penguin ga position .z--' position="0 1.25 -0.1" scale="0.1 0.1 0.1">< / a-troika-text >
< a-troika-text anchor = left target id = "mvx" annotation = "content:pengouin pas nord;back:aide a venir;"
value='jxr qs #penguin ga position .x++' position="0 1.15 -0.1" scale="0.1 0.1 0.1">< / a-troika-text >
< a-troika-text anchor = left target id = "displaypred" value = "jxr displayPred()" position = "0 1.40 -0.1" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target id = "locationreload" value = "jxr location.reload()" position = "0 1.20 -0.1" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target id = "makeAnchorsVisibleOnTargets" value = "jxr makeAnchorsVisibleOnTargets()" position = "0 1.05 -0.1" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr tiltUpId('codeditor')" position = " -0.3 1.65 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr tiltDownId('codeditor')" position = " -0.3 1.60 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
-->
< script >
function mistrallocal(prompt){
//fetch('http://192.168.0.129:8080/completion', {
// failed on Quest, needs https, could try through ngrok
fetch('https://0670-2a02-1811-1c74-7f00-5649-1451-ab01-7f3d.ngrok-free.app/completion' , {
//fetch('http://localhost:8080/completion', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'prompt': prompt,
'n_predict': 128
})
}).then( res => res.json() ).then( res => {
setFeedbackHUD(res.content)
let el = addNewNote(res.content)
el.setAttribute('annotation', prompt)
})
}
function getDirections(){
fetch('https://5ae9-83-217-141-167.ngrok-free.app/route?point=50.837974%2C4.379907& point=50.839004%2C4.358106& profile=car').then(r=>r.json()).then(r=>{
let inst = r.paths[0]?.instructions.map(i=>i.text.split(' - ')[0]).reverse();
let si = setInterval( _ => {
let i = inst.pop();
if (i) { console.log(i); setFeedbackHUD(i) } else { clearInterval(si) }
}, 3000 )
})
}
< / script >
< a-troika-text anchor = left target value = "jxr getDirections()" position = " 0.3 1.55 0" rotation = "0 -45 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
<!--
< a-troika-text anchor = left target value = "jxr mistrallocal('tell the short story of a penguin friend with a fish')" position = " 0.3 1.55 0" rotation = "0 -45 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushLeftClass('maptile')" position = " -0.3 1.55 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushRightClass('maptile')" position = " -0.3 1.50 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushUpClass('maptile')" position = " -0.3 1.45 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushDownClass('maptile')" position = " -0.3 1.40 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushBackClass('maptile')" position = " -0.3 1.35 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
< a-troika-text anchor = left target value = "jxr pushFrontClass('maptile')" position = " -0.3 1.30 0" rotation = "0 90 0" scale = "0.1 0.1 0.1" > < / a-troika-text >
-->
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position
< a-text target value = "jxr qs #rig sa position 0 0 10" position = "0 1.55 .5" rotation = "0 180 0" scale = "0.1 0.1 0.1" > < / a-text >
< a-console position = "-1 1.2 -0.8" rotation = "-5 80 0" font-size = "34" height = .1 skip-intro = true > < / a-console >
< a-troika-text value = "Biggu's Gate" outline-width = "5%" font = "../content/ChakraPetch-Regular.ttf" position = "0 2 -0.5"
rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f">< / a-troika-text >
< a-gltf-model hide-on-enter-ar = "" src = "../content/winterset/Mountains.glb" position = "0 0 0" rotation = "0 0 0" scale = "10 10 10" class = "clonableasset" > < / a-gltf-model >
-->
< a-entity id = "tablescaled" scale = ".1 .1 .1" position = "0 0.8 -.3" >
< a-gltf-model src = "../content/winterset/Crystal.glb" position = "-1 0 -1" rotation = "0 0 0" scale = ".1 .1 .1" class = "clonableasset" > < / a-gltf-model >
< a-gltf-model id = "fish" src = "../content/winterset/Fish.glb" position = "2 0 -2" rotation = "0 0 0" scale = ".01 .01 .01" class = "clonableasset" > < / a-gltf-model >
< a-gltf-model id = "penguin" src = "../content/winterset/Penguin.glb" position = "0 0 -1" rotation = "0 0 0" scale = ".1 .1 .1" class = "clonableasset" > < / a-gltf-model >
< / a-entity >
<!--
< a-gltf-model src = "../content/winterset/Pinetree.glb" position = "0 3 -10" rotation = "0 0 0" scale = "5 5 5" class = "clonableasset" > < / a-gltf-model >
-->
< a-plane hide-on-enter-ar = "" scale = "50 50 50" rotation = "-90 0 0" color = "lightblue" > < / a-plane >
< / a-scene >
< / body >
< / script >
< / html >
