utopiah
/
text-code-xr-engine
1
0
Fork 0
Code Issues 81 Pull Requests Projects Releases Wiki Activity

highlight on gaze and hint on moving children targets

Browse Source
spatial-introspection
Fabien Benetou 8 months ago
parent 717ca1aba4
commit 55d8f2223b
2 changed files with 59 additions and 19 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 48
      index.html
  2. 30
      jxr-core.js

48
index.html
Unescape View File

@ -7,7 +7,7 @@
<script src="dependencies/a-console.js"></script> <script src="dependencies/a-console.js"></script>
<script src='dependencies/aframe-troika-text.min.js'></script> <script src='dependencies/aframe-troika-text.min.js'></script>
<script src='dependencies/webdav.js'></script> <script src='dependencies/webdav.js'></script>
<script src='jxr-core.js?1234'></script> <script src='jxr-core.js?123'></script>
<script src='jxr-postitnote.js?13235'></script> <script src='jxr-postitnote.js?13235'></script>
</head> </head>
<body> <body>
@ -221,17 +221,29 @@ AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent
function onHoveredChangeColor(){ function onHoveredChangeColor(){
console.log( "onHoveredChangeOpacity" ) console.log( "onHoveredChangeOpacity" )
let target = document.getElementById('testboxpinch') // iterate over targets
// could iterate over targets, see https://aframe.io/docs/1.5.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component // see instead of teleportable https://aframe.io/docs/1.5.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
console.log ( "cursor-hovered?", target.states.includes( "cursor-hovered" ) ) Array.from( document.querySelectorAll(".teleportable") ).map( target => {
if ( target.states.includes( "cursor-hovered" ) ){ if ( target.states.includes( "cursor-hovered" ) ){
console.log ( "yes, cursor-hovered" ) target.setAttribute("material", "color", "magenta") // visited
target.setAttribute("material", "color", "green") document.getElementById('rig').setAttribute('position', target.getAttribute("position") )
//target.setAttribute("color", "red") }
document.getElementById('rig').setAttribute('position', "4 0 -3") })
// bug on hand pinch, even while checking on world position, might have to see older commit }
}
AFRAME.registerComponent('highlight-on-gaze', {
init: function(){
this.el.setAttribute("opacity", .5)
},
events: {
mouseenter: function (e) {
this.el.setAttribute("opacity", .8)
},
mouseleave: function (e) {
this.el.setAttribute("opacity", .5)
}
} }
});
let page = "Wiki.VirtualRealityInterface"; let page = "Wiki.VirtualRealityInterface";
// should do then only once graph loaded instead, should emit event // should do then only once graph loaded instead, should emit event
@ -258,8 +270,8 @@ setTimeout( _ => {
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" <a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
hud camera look-controls wasd-controls position="0 1.6 0"> hud camera look-controls wasd-controls position="0 1.6 0">
<a-entity cursor position="0 0 -1" <a-entity cursor position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02" geometry="primitive: ring; radiusInner: 0.005; radiusOuter: 0.01"
material="color: black; shader: flat; opacity:.1;" material="color: black; shader: flat; opacity:.05;"
></a-entity> ></a-entity>
</a-entity> </a-entity>
<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity> <a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
@ -323,8 +335,14 @@ setTimeout( _ => {
<a-box scale=".2 .2 .2" position=".5 .8 -.3" color="yellow" ></a-box> <a-box scale=".2 .2 .2" position=".5 .8 -.3" color="yellow" ></a-box>
<a-entity id="testboxpinch" position="4 1 -4" geometry="primitive: box" material="color: blue"></a-entity> <a-box highlight-on-gaze id="testboxpinch" height=".1" class="teleportable" material="color: cyan" position="3.5 0 -3.5" ></a-box>
<a-troika-text anchor=left value="jxr location.reload()" target position="4 1.30 -3.4" rotation="0 0 0" scale="0.1 0.1 0.1"></a-troika-text> <a-box highlight-on-gaze id="testboxpinch2" height=".1" class="teleportable" material="color: cyan" position="-4 0 4" ></a-box>
<a-box highlight-on-gaze id="testboxpinchtop" height=".1" class="teleportable" material="color: cyan" position="3 3 4" >
<a-troika-text anchor=left value="jxr location.reload()" target position="0 1.30 -.5" rotation="0 0 0" scale="0.1 0.1 0.1"></a-troika-text>
<!-- works to execute but not to move, should either reparent or take into account the parent offset while moving -->
<!-- see pinchmoved in primary pinch in jxr-core.js as potential solution -->
</a-box>
<a-box highlight-on-gaze id="testboxpinchstart" height=".1" class="teleportable" material="color: cyan" position="0 0 0" ></a-box>
</a-scene> </a-scene>
</body> </body>
</script> </script>

30
jxr-core.js
Unescape View File

@ -208,6 +208,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
let parentPos = document.getElementById('rig').getAttribute('position') let parentPos = document.getElementById('rig').getAttribute('position')
pos.add( parentPos ) pos.add( parentPos )
selectedElement.setAttribute("position", pos ) selectedElement.setAttribute("position", pos )
// TODO get the world position of the selectedElement on pinchstarted then offset by that
document.querySelector("#rightHand").object3D.traverse( e => { document.querySelector("#rightHand").object3D.traverse( e => {
if (e.name == "ring-finger-tip"){ if (e.name == "ring-finger-tip"){
selectedElement.object3D.rotation.copy( e.rotation ) selectedElement.object3D.rotation.copy( e.rotation )
@ -608,11 +609,32 @@ function doublePinchToScale(){
} }
// from https://aframe.io/aframe/examples/showcase/hand-tracking/pressable.js // from https://aframe.io/aframe/examples/showcase/hand-tracking/pressable.js
// modified to support teleportation via #rig
AFRAME.registerComponent('pressable', { AFRAME.registerComponent('pressable', {
schema:{pressDistance:{default:0.06}}, schema:{pressDistance:{default:0.06}},
init:function(){this.worldPosition=new THREE.Vector3();this.handEls=document.querySelectorAll('[hand-tracking-controls]');this.pressed=false;}, init:function(){this.worldPosition=new THREE.Vector3();this.handEls=document.querySelectorAll('[hand-tracking-controls]');this.pressed=false;},
tick:function(){var handEls=this.handEls;var handEl;var distance;for(var i=0;i<handEls.length;i++){handEl=handEls[i];distance=this.calculateFingerDistance(handEl.components['hand-tracking-controls'].indexTipPosition);if(distance<this.data.pressDistance){if(!this.pressed){this.el.emit('pressedstarted');} this.pressed=true;return;}} if(this.pressed){this.el.emit('pressedended');} this.pressed=false;}, tick:function(){
calculateFingerDistance:function(fingerPosition){var el=this.el;var worldPosition=this.worldPosition;worldPosition.copy(el.object3D.position);el.object3D.parent.updateMatrixWorld();el.object3D.parent.localToWorld(worldPosition);return worldPosition.distanceTo(fingerPosition);} var handEls=this.handEls;var handEl;
var distance;
for(var i=0;i<handEls.length;i++){
handEl=handEls[i];distance=this.calculateFingerDistance(handEl.components['hand-tracking-controls'].indexTipPosition);
if(distance<this.data.pressDistance){
if(!this.pressed){this.el.emit('pressedstarted');}
this.pressed=true;return;}
}
if(this.pressed){this.el.emit('pressedended');}
this.pressed=false;
},
calculateFingerDistance:function(fingerPosition){
let parentPos = document.getElementById('rig').getAttribute('position')
fingerPosition.add( parentPos )
var el=this.el;
var worldPosition=this.worldPosition;
worldPosition.copy(el.object3D.position);
el.object3D.parent.updateMatrixWorld();
el.object3D.parent.localToWorld(worldPosition);
return worldPosition.distanceTo(fingerPosition);
}
}); });
AFRAME.registerComponent('start-on-press', { AFRAME.registerComponent('start-on-press', {
@ -620,8 +642,8 @@ AFRAME.registerComponent('start-on-press', {
init: function(){ init: function(){
let el = this.el let el = this.el
this.el.addEventListener('pressedended', function (event) { this.el.addEventListener('pressedended', function (event) {
console.log(event) console.log(event)
// should ignore that if we entered XR recently // should ignore that if we entered XR recently
if (!primaryPinchStarted && wristShortcut.match(prefix)) interpretJXR(wristShortcut) if (!primaryPinchStarted && wristShortcut.match(prefix)) interpretJXR(wristShortcut)
// seems to happen also when entering VR // seems to happen also when entering VR
// other action could possibly based on position relative to zones instead, i.e a list of bbox/functions pairs // other action could possibly based on position relative to zones instead, i.e a list of bbox/functions pairs

Write Preview
Loading…
Cancel
Save