working teleport with interaction

3 weeks ago · 717ca1aba4
parent 0421cf3099
commit 717ca1aba4
2 changed files with 47 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -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?123'></script> 
+    <script src='jxr-core.js?1234'></script> 
    <script src='jxr-postitnote.js?13235'></script> 
  </head>
  <body>
@ -219,6 +219,19 @@ 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" ) )
+	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
+	}
+  }

 let page = "Wiki.VirtualRealityInterface";
 // should do then only once graph loaded instead, should emit event
@ -237,16 +250,22 @@ setTimeout( _ => {
 	</a>
 </div>

-<a-scene startfunctions onemptypinch="console.log('empty')">
+<a-scene startfunctions onemptypinch="onHoveredChangeColor()">
      <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 -->

      <a-entity id="rig">
 		<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;"
+				></a-entity>
 		</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-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
      </a-entity>

      <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
@ -260,6 +279,7 @@ setTimeout( _ => {
      <a-troika-text anchor=left value="jxr onNextPrimaryPinch(cloneTarget)" target position=" -0.3 1.60 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
      
      <a-troika-text anchor=left value="jxr location.reload()" target position=" -0.3 1.30 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left value="jxr makeAnchorsVisibleOnTargets()" target position=" -0.3 1.20 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>

      <a-troika-text anchor=left value="forceXaxis toggling"
 	onreleased="console.log('run on released');forceXaxis=!forceXaxis"
@ -273,8 +293,6 @@ setTimeout( _ => {

      <a-troika-text anchor=left value="jxr setTimeout( _ => toggleAttachToSelf(), 1000); toggleAttachToSelf()" target position=" -0.3 1.25 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>

-      <a-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
-
      <a-box scale=".07 .07 .07" class="mab" target position=".3 1.6 -.5" color="brown" onreleased="snapMAB()" >
 	      <a-box scale="1.5 1.5 1" color="brown"></a-box>
 	      <a-box scale="1 1.5 1.5" color="brown"></a-box>
@ -303,6 +321,10 @@ setTimeout( _ => {

      <a-box scale=".1 .1 .1" position=".5 .8 -.3" color="purple" ></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-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-scene>
  </body>
 </script>
--- a/jxr-core.js
+++ b/jxr-core.js
@ -36,14 +36,26 @@ AFRAME.registerComponent('target', {
 })

 function getClosestTargetElements( pos, threshold=0.05 ){ 
+	// assumes pos has now no offset
 	// TODO Bbox intersects rather than position
-	return targets.filter( e => e.getAttribute("visible") == true).map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } })
+	return targets.filter( e => e.getAttribute("visible") == true)
+		.map( t => {
+			let posTarget = new THREE.Vector3()
+			t.object3D.getWorldPosition( posTarget )
+			let d = pos.distanceTo( posTarget )
+			return { el: t, dist : d }
+		})
 		.filter( t => t.dist < threshold && t.dist > 0 )
 		.sort( (a,b) => a.dist > b.dist)
 }

 function getClosestTargetElement( pos, threshold=0.05 ){ // 10x lower threshold for flight mode
 	var res = null
+	// assumes both hands have the same (single) parent, if any
+	let parentPos = document.getElementById('rig').getAttribute('position')
+	pos.add( parentPos )
+	console.log( "from getClosestTargetElements, pos:", pos ) // relative pos, should thus remove rig position, even though it makes assumptions
+	
 	const matches = getClosestTargetElements( pos, threshold)
 	if (matches.length > 0) res = matches[0].el
 	return res
@ -151,7 +163,10 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
 			// see own trigger-box component. Could use dedicated threejs helpers instead.
 				// https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66
 			// could make trigger zones visible as debug mode
-		var closests = getClosestTargetElements( event.detail.position )
+		let pos = event.detail.position
+		let parentPos = document.getElementById('rig').getAttribute('position')
+		pos.add( parentPos )
+		var closests = getClosestTargetElements( pos )
 		//if (closests && closests.length > 0) // avoiding self reference
 		//	setFeedbackHUD("close enough, could stack with "+ closests[1].el.getAttribute("value") )
 		var dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position )
@ -189,7 +204,10 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
 				selectionBox.update();
 		}
 		if (selectedElement && !groupingMode) {
-			selectedElement.setAttribute("position", event.detail.position)
+			let pos = event.detail.position
+			let parentPos = document.getElementById('rig').getAttribute('position')
+			pos.add( parentPos )
+			selectedElement.setAttribute("position", pos )
 			document.querySelector("#rightHand").object3D.traverse( e => {
 				if (e.name == "ring-finger-tip"){
 					selectedElement.object3D.rotation.copy( e.rotation )