example of docs on knuckles and pinch to dettach

index.html

@@ -3421,6 +3421,38 @@ function setNearbyEditor(el){
 	})
 }
 
+AFRAME.registerComponent('knuckles-docs',{
+  init: function () {
+	var el = this.el
+	this.worldPosition=new THREE.Vector3();
+	Array.from( document.querySelectorAll(".docs") ).map( doc => {
+		doc.addEventListener('picked', _ => { doc.classList.remove('docs') })
+		// should check on released in order to attach back if close enough
+	})
+  },
+  tick: function () {
+	const docs = Array.from( document.querySelectorAll(".docs") )
+	var worldPosition=this.worldPosition;
+	const attachables = ['pinky-finger-phalanx-intermediate', 'pinky-finger-phalanx-distal', ' pinky-finger-tip'] // somehow tip not available
+	attachables.map( (attachable, i) => {
+		this.el.object3D.traverse( e => { if (e.name == attachable) {
+			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
+			if (docs[i] ){
+				docs[i].setAttribute("scale", '.1 .1')
+				docs[i].setAttribute("rotation", rotation)
+				docs[i].setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
+			}
+		  }
+		})
+	})
+	
+  },
+  remove: function() {
+	// should remove event listeners here. Requires naming them.
+  }
+});
+
 // used for testing
 AFRAME.registerComponent('startfunctions', {
   init: function () {
@@ -3465,8 +3497,11 @@ AFRAME.registerComponent('startfunctions', {
 		<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" 
 			hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0"></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-entity id="leftHand" pinchsecondary knuckles-docs wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
       </a-entity>
+      <a-image target class="docs" src='https://vatelier.benetou.fr/MyDemo/newtooling/web/renders/fabien.benetou.fr_Analysis_Analysis.png'></a-image>
+      <a-image target class="docs" src='https://vatelier.benetou.fr/MyDemo/newtooling/web/renders/fabien.benetou.fr_Analysis_CostsAndBenefitsOfSocietalMembership.png'></a-image>
+      <a-image target class="docs" src='https://vatelier.benetou.fr/MyDemo/newtooling/web/renders/fabien.benetou.fr_Analysis_UsingEpistemotaxis.png'></a-image>
 
       <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink">
 	  <a-entity collider-check raycaster="objects: .collidable; showLine:true;" ></a-entity>