switch side initial draft

warmup
Fabien Benetou 2 years ago
parent 0c60b00b5b
commit 7cabe329fe
  1. 43
      index.html

@ -110,6 +110,8 @@ const savedProperties = [ "src", "position", "rotation", "scale", "value", ] //
var groupSelection = [] var groupSelection = []
var cabin //storage for load/save. Should use a better name as this is a reminder of a past version rather than something semantically useful. var cabin //storage for load/save. Should use a better name as this is a reminder of a past version rather than something semantically useful.
const url = "https://fabien.benetou.fr/PIMVRdata/CabinData?action=" const url = "https://fabien.benetou.fr/PIMVRdata/CabinData?action="
var primarySide = 0
const sides = ["right", "left"]
var generators = "line-link-entities link screenstack dynamic-view selectionboxonpinches keyboard " var generators = "line-link-entities link screenstack dynamic-view selectionboxonpinches keyboard "
+ "commands-from-external-json glossary timeline issues web-url background-via-url observableui hidableenvironmentfot fot" + "commands-from-external-json glossary timeline issues web-url background-via-url observableui hidableenvironmentfot fot"
// could be an array proper completed on each relevant component registration // could be an array proper completed on each relevant component registration
@ -755,18 +757,14 @@ AFRAME.registerComponent('wristattachsecondary',{
init: function () { init: function () {
var el = this.el var el = this.el
this.worldPosition=new THREE.Vector3(); this.worldPosition=new THREE.Vector3();
//var side = this.el.getAttribute("hand-tracking-controls").hand[0] // fails
// (this.el.components)
this.side = "l"
if ( this.el.getAttribute("hand-tracking-controls").indexOf("right") ) this.side = "r"
}, },
tick: function () { tick: function () {
// could check if it exists first, or isn't 0 0 0... might re-attach fine, to test // could check if it exists first, or isn't 0 0 0... might re-attach fine, to test
// somehow very far away... need to convert to local coordinate probably // somehow very far away... need to convert to local coordinate probably
// localToWorld? // localToWorld?
(primarySide == 0) ? secondarySide = 1 : secondarySide = 0
var worldPosition=this.worldPosition; var worldPosition=this.worldPosition;
//this.el.object3D.traverse( e => { if (e.name == "b_"+this.side+"_wrist") { this.el.object3D.traverse( e => { if (e.name == "b_"+sides[secondarySide][0]+"_wrist") {
this.el.object3D.traverse( e => { if (e.name == "b_l_wrist") {
worldPosition.copy(e.position);e.parent.updateMatrixWorld();e.parent.localToWorld(worldPosition) worldPosition.copy(e.position);e.parent.updateMatrixWorld();e.parent.localToWorld(worldPosition)
rotation = e.rotation.x*180/3.14 + " " + e.rotation.y*180/3.14 + " " + e.rotation.z*180/3.14 rotation = e.rotation.x*180/3.14 + " " + e.rotation.y*180/3.14 + " " + e.rotation.z*180/3.14
this.data.target.setAttribute("rotation", rotation) this.data.target.setAttribute("rotation", rotation)
@ -776,6 +774,9 @@ AFRAME.registerComponent('wristattachsecondary',{
//this.data.target.setAttribute("rotation", AFRAME.utils.coordinates.stringify( e.getAttribute("rotation") ) //this.data.target.setAttribute("rotation", AFRAME.utils.coordinates.stringify( e.getAttribute("rotation") )
} }
}) })
},
remove: function() {
// should remove event listeners here. Requires naming them.
} }
}); });
@ -811,6 +812,9 @@ AFRAME.registerComponent('pinchsecondary', {
if (!selectionPinchMode) bbox.min.copy( zeroVector3 ) if (!selectionPinchMode) bbox.min.copy( zeroVector3 )
if (selectionPinchMode) setHUD( "selectionPinchMode started") if (selectionPinchMode) setHUD( "selectionPinchMode started")
}); });
},
remove: function() {
// should remove event listeners here. Requires naming them.
} }
}); });
@ -862,7 +866,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
if (selectedElement && !groupingMode) { if (selectedElement && !groupingMode) {
selectedElement.setAttribute("position", event.detail.position) selectedElement.setAttribute("position", event.detail.position)
document.querySelector("#rightHand").object3D.traverse( e => { document.querySelector("#rightHand").object3D.traverse( e => {
if (e.name == "b_r_wrist") if (e.name == "b_"+sides[primarySide][0]+"_wrist")
selectedElement.setAttribute("rotation", e.rotation.x*180/3.14 + " " + e.rotation.y*180/3.14 + " " + e.rotation.z*180/3.14) selectedElement.setAttribute("rotation", e.rotation.x*180/3.14 + " " + e.rotation.y*180/3.14 + " " + e.rotation.z*180/3.14)
}) })
// rotation isn't ideal with the wrist as tend not have wrist flat as we pinch // rotation isn't ideal with the wrist as tend not have wrist flat as we pinch
@ -881,6 +885,9 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
selectedElement = getClosestTargetElement( event.detail.position ) selectedElement = getClosestTargetElement( event.detail.position )
// if close enough to a target among a list of potential targets, unselect previous target then select new // if close enough to a target among a list of potential targets, unselect previous target then select new
}); });
},
remove: function() {
// should remove event listeners here. Requires naming them.
} }
}); });
@ -1447,6 +1454,24 @@ function remoteSave(){
}).then(res => res).then(res => console.log("saved remotely", res)) }).then(res => res).then(res => console.log("saved remotely", res))
} }
function switchSide(){
// mostly works... but event listeners are not properly removed. Quickly creates a mess, low performance and unpredictable.
document.querySelector("#"+sides[primarySide]+"Hand").removeAttribute("pinchprimary")
document.querySelector("#"+sides[secondarySide]+"Hand").removeAttribute("pinchsecondary")
document.querySelector("#"+sides[secondarySide]+"Hand").removeAttribute("wristattachsecondary")
document.querySelector("#"+sides[secondarySide]+"Hand").setAttribute("pinchprimary", "")
document.querySelector("#"+sides[primarySide]+"Hand").setAttribute("pinchsecondary", "")
document.querySelector("#"+sides[primarySide]+"Hand").setAttribute("wristattachsecondary", "target: #box")
if (primarySide == 0) {
secondarySide = 0
primarySide = 1
} else {
primarySide = 0
secondarySide = 1
}
}
// could change model opacity based on hand position, fading out when within a (very small here) safe space // could change model opacity based on hand position, fading out when within a (very small here) safe space
</script> </script>
<div id="observablehq-key"> <div id="observablehq-key">
@ -1482,8 +1507,8 @@ function remoteSave(){
pinchprimary ></a-entity> pinchprimary ></a-entity>
--> -->
<a-entity pinchprimary id="rightHand" hand-tracking-controls="hand: right;"></a-entity> <a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
<a-entity wristattachsecondary="target: #box" pinchsecondary id="leftHand" hand-tracking-controls="hand: left;"></a-entity> <a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
<a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box> <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! --> <!-- could attach functions here... BUT then they have to be activable with the other hand! -->

Loading…
Cancel
Save