cylinder example and counter added

index.html

@@ -3423,6 +3423,7 @@ function setNearbyEditor(el){
 
 AFRAME.registerComponent('knuckles-docs',{
   init: function () {
+	// to handle going from cylinder to image back and forth could have a parent entity holding both then toggling visibility
 	var el = this.el
 	this.worldPosition=new THREE.Vector3();
 	Array.from( document.querySelectorAll(".docs") ).map( doc => {
@@ -3443,29 +3444,51 @@ AFRAME.registerComponent('knuckles-docs',{
 		el.id = 'attachable-'+attachable
 		AFRAME.scenes[0].appendChild(el)
 	})
+	let counterEl = document.createElement('a-troika-text')
+	counterEl.id = 'knuckles-docs-counter'
+	AFRAME.scenes[0].appendChild(counterEl)
+	this.counterEl = counterEl
   },
   tick: function () {
 	const docs = Array.from( document.querySelectorAll(".docs") )
-	var worldPosition=this.worldPosition;
+	let worldPosition=this.worldPosition
+	let counterEl = this.counterEl
 	const attachables = ['pinky-finger-phalanx-intermediate', 'pinky-finger-phalanx-distal', ' pinky-finger-tip'] // somehow tip not available
+	let usedSpots = 0
 	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] ){
+				usedSpots++
+				docs[i].setAttribute("scale", '.01 .01 .01')
+				docs[i].setAttribute("rotation", rotation)
+				docs[i].setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
+			}
+			// special model for cylinder testing, not using the class
 			let el = document.getElementById('attachable-'+attachable)
 			if (el){
+				usedSpots++
 				el.setAttribute("rotation", rotation)
 				el.setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
 			}
-			if (docs[i] ){
-				docs[i].setAttribute("scale", '.1 .1 .01')
-				docs[i].setAttribute("rotation", rotation)
-				docs[i].setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
-			}
 		  }
 		})
 	})
-	
+	this.el.object3D.traverse( e => {
+		if (e.name == "wrist") {
+			if (counterEl){
+				worldPosition.copy(e.position);e.parent.updateMatrixWorld();e.parent.localToWorld(worldPosition)
+				worldPosition.y+=.1
+				// should rotation 90deg like a watch
+				rotation = e.rotation.x*180/3.14 + " " + e.rotation.y*180/3.14 + " " + e.rotation.z*180/3.14
+				counterEl.setAttribute("scale", '.1 .1 .1')
+				counterEl.setAttribute("rotation", rotation)
+				counterEl.setAttribute("position", AFRAME.utils.coordinates.stringify( worldPosition ) )
+				counterEl.setAttribute("value", usedSpots + '/' + attachables.length)
+			}
+		}
+	})
   },
   remove: function() {
 	// should remove event listeners here. Requires naming them.
@@ -3518,10 +3541,11 @@ AFRAME.registerComponent('startfunctions', {
 		<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></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-cylinder open-ended="true" material="repeat: 3 1; side: double;" target class="docs" src='https://fabien.benetou.fr/pub/home/future_of_text_demo/content/fabien.benetou.fr_Analysis_Analysis.png'></a-cylinder>
+      <!-- <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>
       </a-box>