attach back docs

index.html

@@ -3427,7 +3427,21 @@ AFRAME.registerComponent('knuckles-docs',{
 	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
+		doc.addEventListener('released', _ => {
+			Array.from( document.querySelectorAll( '.attachablespot' ) ).map( attachable => {
+				let dist = doc.getAttribute('position').distanceTo( attachable.getAttribute('position') )
+				if ( dist < 0.2 ) doc.classList.add('docs')
+			})
+		})
+	})
+	const attachables = ['pinky-finger-phalanx-intermediate', 'pinky-finger-phalanx-distal', ' pinky-finger-tip'] // somehow tip not available
+	attachables.map( (attachable, i) => {
+		let el = document.createElement("a-box")
+		el.classList.add('attachablespot')
+		el.setAttribute("scale", '.1 .1 .01')
+		el.setAttribute("wireframe", true)
+		el.id = 'attachable-'+attachable
+		AFRAME.scenes[0].appendChild(el)
 	})
   },
   tick: function () {
@@ -3438,8 +3452,13 @@ AFRAME.registerComponent('knuckles-docs',{
 		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
+			let el = document.getElementById('attachable-'+attachable)
+			if (el){
+				el.setAttribute("rotation", rotation)
+				el.setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
+			}
 			if (docs[i] ){
-				docs[i].setAttribute("scale", '.1 .1')
+				docs[i].setAttribute("scale", '.1 .1 .01')
 				docs[i].setAttribute("rotation", rotation)
 				docs[i].setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
 			}