|
|
|
|
<!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/shiki0.14.1.js"></script>
|
|
|
|
|
<!-- bit demanding but it IS about code too, so arguably important enough -->
|
|
|
|
|
|
|
|
|
|
<script src='jxr-core.js'></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// goal : being able to modify the bindings in XR, hence the manager part
|
|
|
|
|
|
|
|
|
|
const gestures = [];
|
|
|
|
|
// start with : left pinch, right pinch, right index tap
|
|
|
|
|
var gesturesTargets = []
|
|
|
|
|
// start with target (updated by target component) and selectors e.g #box (maybe semantically clarified, i.e follow wrist)
|
|
|
|
|
|
|
|
|
|
var boundGestures = [];
|
|
|
|
|
// start with
|
|
|
|
|
// left pinch ON [target] (correct selector)
|
|
|
|
|
// right pinch ON [target]
|
|
|
|
|
// right index tap ON #box
|
|
|
|
|
|
|
|
|
|
AFRAME.registerComponent('empty', {
|
|
|
|
|
init: function(){
|
|
|
|
|
console.log('empty component example')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
function listBoundGestures(){
|
|
|
|
|
console.log('could start with : left pinch, right pinch, box tap')
|
|
|
|
|
console.log(boundGestures, gestures, gesturesTargets)
|
|
|
|
|
console.log('pinchprimary pinchsecondary wristattachsecondary="target: #box" pressable start-on-press')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// switchSide() showcase a selector/attribute model. Maybe others do work this way.
|
|
|
|
|
// might be possible to have a onreleased neary a selector, e.g #rightHand as a way to manage gestures
|
|
|
|
|
// e.g onreleased="" on #rightHand or #leftHand could add/remove the attribute, e.g pinchprimary/pinchsecondary
|
|
|
|
|
// it could also remove it for any other entity if it's an exclusive attribute (can only be used once)
|
|
|
|
|
|
|
|
|
|
// need to list which entities can actually receive an attribute related to gesture
|
|
|
|
|
// for example pinchprimary/pinchsecondary need to be on entities with hand-tracking-controls
|
|
|
|
|
// it would not make sense to expect a pinch from a sphere nor a single finger of a hand
|
|
|
|
|
|
|
|
|
|
// draw a line between a selector and its instancing
|
|
|
|
|
// e.g between "#rightHand" and actually the element with this id
|
|
|
|
|
AFRAME.registerComponent('selector-line', {
|
|
|
|
|
init: function(){
|
|
|
|
|
this.newLine = document.createElement("a-entity")
|
|
|
|
|
this.newLine.setAttribute("line", "start: 0, 0, 0; end: 0 0 0.01; color: red")
|
|
|
|
|
AFRAME.scenes[0].appendChild( this.newLine )
|
|
|
|
|
this.worldPosition=new THREE.Vector3()
|
|
|
|
|
},
|
|
|
|
|
tick: function(){
|
|
|
|
|
// unfortunately here it does not work as it's not the entity itself for the hand that has a position... (cf NAF discussions)
|
|
|
|
|
let worldPosition = this.worldPosition
|
|
|
|
|
|
|
|
|
|
document.querySelector( this.el.getAttribute("value") ).object3D.traverse( e => { if (e.name == "wrist") {
|
|
|
|
|
worldPosition.copy(e.position);e.parent.updateMatrixWorld();e.parent.localToWorld(worldPosition)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
let startPos = this.el.getAttribute("position") // does not seem to update..?
|
|
|
|
|
this.newLine.setAttribute("line", "end", AFRAME.utils.coordinates.stringify( worldPosition ) )
|
|
|
|
|
this.newLine.setAttribute("line", "start", AFRAME.utils.coordinates.stringify( startPos) )
|
|
|
|
|
|
|
|
|
|
//console.log( startPos, worldPosition)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// try pinching modifier, e.g pinch while holding the SHIFT key
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<a-scene startfunctions>
|
|
|
|
|
<!-- City Scene Sketch by Alex Safayan [CC-BY] via Poly Pizza -->
|
|
|
|
|
<a-gltf-model hide-on-enter-ar="" id="environment" rotation="" position="4.15152 0 -2.52983" scale="4 4 4" gltf-model="../content/CitySceneSketch.glb"></a-gltf-model>
|
|
|
|
|
|
|
|
|
|
<a-entity id="rig">
|
|
|
|
|
<a-entity id="player" 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-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-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="lightblue"></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-console position="-1 1.5 0" rotation="0 45 0" font-size="34" height=1 skip-intro=true></a-console>
|
|
|
|
|
|
|
|
|
|
<a-troika-text anchor=left target selector-line value="#rightHand" position="0 1.30 -0.4" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
|
|
|
|
|
|
<a-troika-text anchor=left target id="listboundgestures" value="jxr listBoundGestures()" position="0 1.40 -0.4" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
|
<a-troika-text anchor=left target id="switchside" value="jxr switchSide()" position="0 1.35 -0.4" scale="0.1 0.1 0.3"></a-troika-text>
|
|
|
|
|
|
|
|
|
|
<a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.4" 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.4" scale="0.1 0.1 0.1"></a-troika-text>
|
|
|
|
|
|
|
|
|
|
</a-scene>
|
|
|
|
|
</body>
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
