SpaSca : open SCAffolding to SPAcially and textualy explore interfaces https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
text-code-xr-engine/index.html

158 lines
7.7 KiB

<!DOCTYPE html>
<html>
<title>SpaSca : Spatial Scaffolding</title>
<head>
<!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
<script src='dependencies/aframe.offline.min.js'></script>
<script src="dependencies/a-console.js"></script>
<script src='dependencies/aframe-troika-text.min.js'></script>
<script src='dependencies/webdav.js'></script>
<script src='jxr-core.js?12345'></script>
<script src='jxr-postitnote.js?13235'></script>
<!-- <script src="https://unpkg.com/aframe-curves@1.0.0/build/curve.min.js"></script> -->
<script src="dependencies/aframe-curve.js"></script>
</head>
<body>
<script>
function cloneTarget(target){
let el = target.cloneNode(true)
if (!el.id)
el.id = "clone_" + crypto.randomUUID()
else
el.id += "_clone_" + crypto.randomUUID()
AFRAME.scenes[0].appendChild(el)
}
function deleteTarget(target){
targets = targets.filter( e => e != target)
target.remove()
}
function runClosestJXR(){
// ideally this would come from event details
let latest = selectedElements[selectedElements.length-1].element
let el = getClosestTargetElement( latest.getAttribute('position') )
if (el) interpretJXR( el.getAttribute("value") )
}
function onHoveredTeleport(){
// iterate over targets
// see instead of teleportable https://aframe.io/docs/1.5.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
Array.from( document.querySelectorAll("[teleporter]") ).map( target => {
if ( target.states.includes( "cursor-hovered" ) ){
target.setAttribute("material", "color", "magenta") // visited
document.getElementById('rig').setAttribute('position', target.getAttribute("position") )
}
})
}
</script>
<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>
<a-scene startfunctions library-load onemptypinch="onHoveredTeleport()" >
<a-gltf-model visible="false" hide-on-enter-ar="" id="environment" src="../content/CubeRoom.glb" rotation="0 -90 0" position="0 0 1" scale="" ></a-gltf-model>
<!-- Cube Room by Anonymous [CC-BY] via Poly Pizza -->
<a-sphere animation="property: rotation; to: 0 360 0; dur: 20000; easing: linear; loop: true" position="-2 1 -1" radius=".5" src="../content/earth.jpg"></a-sphere>
<a-sphere animation="property: rotation; to: 0 360 0; dur: 20000; easing: linear; loop: true" position="1 1 -1" radius=".2" src="../content/moon.jpg"></a-sphere>
<a-draw-curve curveref="#track1" color="#0000ff"></a-draw-curve>
<!-- color works in the demo on Glitch but somehow not here, might be an AFrame version diff -->
<a-draw-curve curveref="#part1" color="red"></a-draw-curve>
<a-draw-curve curveref="#part2" color="blue"></a-draw-curve>
<a-draw-curve curveref="#part3" color="orange"></a-draw-curve>
<a-sphere position="-1.5 1 -1" radius=".01" color="red">
<a-troika-text rotation="0 90 0" anchor=left position="0 0.1 0" value="1"></a-troika-text>
<a-torus rotation="0 90 0" color="red" radius=".05" radius-tubular=".01"></a-torus>
</a-sphere>
<a-sphere position="-1.4 1 -1.2" radius=".01" color="red">
<a-troika-text rotation="0 45 0" anchor=left position="0 0.1 0" value="2"></a-troika-text>
<a-torus rotation="0 90 0" color="red" radius=".05" radius-tubular=".01"></a-torus>
</a-sphere>
<a-sphere position="0 1 -1" radius=".01" color="red">
<a-troika-text rotation="0 45 0" anchor=left position="0 0.1 0" value="3"></a-troika-text>
<a-torus rotation="0 90 0" color="red" radius=".05" radius-tubular=".01"></a-torus>
</a-sphere>
<a-curve id="part1"> <!-- from page 12 of ESA moon media kit -->
<a-curve-point position="-1.5 1 -1"></a-curve-point>
<!-- step 1 -->
<a-curve-point position="-1.4 1 -1.2"></a-curve-point>
<!-- step 2 -->
<a-curve-point position="-1.7 1 -1.6"></a-curve-point>
<a-curve-point position="-2.3 1 -1.6"></a-curve-point>
<a-curve-point position="-2.7 1 -0.6"></a-curve-point>
<a-curve-point position="-2 1 -0.2"></a-curve-point>
<a-curve-point position="0 1 -1"></a-curve-point>
<!-- step 3 -->
</a-curve>
<a-curve id="track1">
<a-curve-point position="-3 2 -1"></a-curve-point>
<a-curve-point position="-3 0 -1"></a-curve-point>
<a-curve-point position="1 1.5 -1"></a-curve-point>
<a-curve-point position="1.5 1 -1"></a-curve-point>
<a-curve-point position="1 0.5 -1"></a-curve-point>
<a-curve-point position="-3 2 -1"></a-curve-point>
</a-curve>
<a-entity follow-path="incrementBy:0.01; throttleTo:30" rotation="0 0 -90" position="-1 0 -1">
<a-cylinder position="-0.06 0 0" height=".4" radius=".02" color="white">
<a-cone position="0 0.23 0" height=".05" radius-top="0" radius-bottom=".02" color="white"></a-cone>
</a-cylinder>
<a-cylinder position="0 0.1 0" height=".6" radius=".04" color="orange">
<a-cone position="0 0.35 0" height=".1" radius-top="0" radius-bottom=".04" color="orange"></a-cone>
</a-cylinder>
<a-cylinder position="0 0.4 0" height=".2" radius=".03" color="white">
<a-cone position="0 .15 0" height=".1" radius-top="0" radius-bottom=".03" color="white"></a-cone>
</a-cylinder>
<a-cylinder position="0.06 0 0" height=".4" radius=".02" color="white">
<a-cone position="0 0.23 0" height=".05" radius-top="0" radius-bottom=".02" color="white"></a-cone>
</a-cylinder>
</a-entity>
<!--
<a-gltf-model scale=".01 .01 .01" position="0 1 -.4" src="../content/artemis_from_fbx_optim.glb" target></a-gltf-model>
-->
<a-entity id="rig">
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
hud camera look-controls wasd-controls position="0 1.6 0">
<a-entity cursor position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.005; radiusOuter: 0.01"
material="color: black; shader: flat; opacity:.05;"
></a-entity>
</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-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
</a-entity>
<a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="-3 5 -2"
scale="3 3 3" rotation="80 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 src="../content/TychoSkymapII.t3_04096x02048.jpg"></a-sky>
<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 value="jxr onNextPrimaryPinch(deleteTarget)" target position=" -0.3 1.50 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr onNextPrimaryPinch(cloneTarget)" target position=" -0.3 1.60 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr location.reload()" target position=" -0.3 1.30 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr makeAnchorsVisibleOnTargets()" target position=" -0.3 1.20 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
</a-scene>
</body>
</script>
</html>