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. 44
      index.html
  2. 26
      jxr-core.js

44
index.html
Unescape View File

@ -7,7 +7,7 @@
<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?1234'></script>
<script src='jxr-core.js?123'></script>
<script src='jxr-postitnote.js?13235'></script>
</head>
<body>
@ -221,17 +221,29 @@ AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent
function onHoveredChangeColor(){
console.log( "onHoveredChangeOpacity" )
let target = document.getElementById('testboxpinch')
// could iterate over targets, see 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" ) )
// 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(".teleportable") ).map( target => {
if ( target.states.includes( "cursor-hovered" ) ){
console.log ( "yes, cursor-hovered" )
target.setAttribute("material", "color", "green")
//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
target.setAttribute("material", "color", "magenta") // visited
document.getElementById('rig').setAttribute('position', target.getAttribute("position") )
}
})
}
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";
// 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;"
hud camera look-controls wasd-controls position="0 1.6 0">
<a-entity cursor position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
material="color: black; shader: flat; opacity:.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>
@ -323,8 +335,14 @@ setTimeout( _ => {
<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-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="testboxpinch" height=".1" class="teleportable" material="color: cyan" position="3.5 0 -3.5" ></a-box>
<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>
</body>
</script>

26
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')
pos.add( parentPos )
selectedElement.setAttribute("position", pos )
// TODO get the world position of the selectedElement on pinchstarted then offset by that
document.querySelector("#rightHand").object3D.traverse( e => {
if (e.name == "ring-finger-tip"){
selectedElement.object3D.rotation.copy( e.rotation )
@ -608,11 +609,32 @@ function doublePinchToScale(){
}
// from https://aframe.io/aframe/examples/showcase/hand-tracking/pressable.js
// modified to support teleportation via #rig
AFRAME.registerComponent('pressable', {
schema:{pressDistance:{default:0.06}},
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;},
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);}
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;
},
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', {

Write Preview
Loading…
Cancel
Save