simplified teleportation zones in XR with single component, fixed on enter VR pressable bug

index.html

@@ -204,13 +204,20 @@ function spreadItemsFromCollection( generatorName, offset=1, step=1/10, depth=-.
 }
 
 AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent with event name
+  init: function(){
+	AFRAME.scenes[0].addEventListener('enter-vr', e => {
+		console.log('entered vr')
+		document.querySelector("[cursor]").setAttribute("visible", "true")
+		document.querySelector("[camera]").setAttribute("cursor", "") 
+	})
+  },
 // could support multi
         events: {
                 emptypinch: function (e) {
+			// works with AFRAME.scenes[0].emit('emptypinch', {position:"0 0 0"})
                         let code = this.el.getAttribute('onemptypinch')
                         // if multi, should also look for onreleased__ not just onreleased
                         try {   
-				console.log('emptypinch', e.detail.position)
                                 eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt)
                         } catch (error) {
                                 console.error(`Evaluation failed with ${error}`);
@@ -219,11 +226,10 @@ AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent
         }
 })
 
-function onHoveredChangeColor(){
+function onHoveredTeleport(){
-	console.log( "onHoveredChangeOpacity" )
 	// iterate over targets
-	// see instead of teleportable 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 
-	Array.from( document.querySelectorAll(".teleportable") ).map( target => {
+	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") )
@@ -231,17 +237,15 @@ function onHoveredChangeColor(){
 	})
 }
 
-AFRAME.registerComponent('highlight-on-gaze', {
+AFRAME.registerComponent('teleporter', {
   init: function(){
 	this.el.setAttribute("opacity", .5)
   },
   events: {
-    mouseenter: function (e) {
+    mouseenter: function (e) { this.el.setAttribute("opacity", .8) },
-	this.el.setAttribute("opacity", .8)
+    mouseleave: function (e) { this.el.setAttribute("opacity", .5) },
-    },
+    click: function (e) { document.getElementById('rig').setAttribute('position', this.el.getAttribute("position") ) }
-    mouseleave: function (e) {
+    // makes it compatible with mouse on desktop ... but also somehow enable the wrist shortcut?!
-	this.el.setAttribute("opacity", .5)
-    }
   }
 });
 
@@ -262,7 +266,7 @@ setTimeout( _ => {
 	</a>
 </div>
 
-<a-scene startfunctions onemptypinch="onHoveredChangeColor()">
+<a-scene startfunctions onemptypinch="onHoveredTeleport()">
       <a-gltf-model 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 -->
 
@@ -335,14 +339,14 @@ setTimeout( _ => {
       <a-box scale=".2 .2 .2" position=".5 .8 -.3" color="yellow" ></a-box>
 
 
-	<a-box highlight-on-gaze id="testboxpinch" height=".1" class="teleportable" material="color: cyan" position="3.5 0 -3.5" ></a-box>
+	<a-box teleporter 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 teleporter 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-box teleporter 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-box teleporter height=".1" class="teleportable" material="color: cyan" position="0 0 0" ></a-box>
     </a-scene>
   </body>
 </script>

jxr-core.js

@@ -569,8 +569,12 @@ AFRAME.registerComponent('wristattachsecondary',{
   init: function () {
         var el = this.el
         this.worldPosition=new THREE.Vector3();
+	this.skip = false
+	if (! this.data.target ) this.skip = true
   },
   tick: function () {
+	if (this.skip) return
+
         // 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
                   // localToWorld?
@@ -620,11 +624,11 @@ AFRAME.registerComponent('pressable', {
 		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(distance>0 && distance<this.data.pressDistance){
 				if(!this.pressed){this.el.emit('pressedstarted');}
 				this.pressed=true;return;}
 		}
-		if(this.pressed){this.el.emit('pressedended');}
+		if(this.pressed){this.el.emit('pressedended');} // somehow happens on click, outside of VR
 		this.pressed=false;
 	},
 	calculateFingerDistance:function(fingerPosition){