example as GIF in Tweet

index.html

@@ -2176,29 +2176,19 @@ function changeColorLastId(){
 	if (id) document.querySelector("#"+id).setAttribute("color", "red")
 }
 
-/*
+AFRAME.registerComponent('thumbstick-shifting',{
-
+/* illustrated in https://twitter.com/utopiah/status/1617460261111173121 */
-generalize selector to pick last Nth rather than very last
+  init: function () {
-        adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1
+    this.el.addEventListener('thumbstickmoved', this.logThumbstick);
-
+  },
-selector pickers : pickClass and pickId
+  logThumbstick: function (evt) {
-        display result in 3D HUD with rotating objects and selector value
+	let className = getClassFromPick()
-                ideally themselves also selectable/usable, e.g clone from HUD to bring back "out"
+    if (evt.detail.y > 0.95) { console.log("DOWN"); pushFrontClass(className)}
-                         requires extra work as becoming a child will not work, own positionning
+    if (evt.detail.y < -0.95) { console.log("UP"); pushBackClass(className)}
-                                should fix that
+    if (evt.detail.x < -0.95) { console.log("LEFT"); pushLeftClass(className)}
-                        could compare to world coordinates instead of "just" position attribute
+    if (evt.detail.x > 0.95) { console.log("RIGHT"); pushRightClass(className)}
-        add a clear selector function to avoid making the HUD unusable
+  }
-
+});
-could also pick via volume, e.g wireframe box
-        start with https://threejs.org/docs/#api/en/math/Box3.containsPoint
-                can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox
-                consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox
-
-consider pick then apply, i.e changeColorLastId() but for next Id
-        should be cancealable
-
-*/
-
 
 </script>
 <div id="observablehq-key">
@@ -2268,8 +2258,8 @@ consider pick then apply, i.e changeColorLastId() but for next Id
 	      <a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
 	-->
 
-      <a-entity oculus-touch-controls="hand: left"></a-entity>
+      <a-entity thumbstick-shifting oculus-touch-controls="hand: left"></a-entity>
-      <a-entity oculus-touch-controls="hand: right"></a-entity>
+      <a-entity thumbstick-shifting oculus-touch-controls="hand: right"></a-entity>
 
     </a-scene>
   </body>