perf test with 140 colors then 20 colors

index.html

@@ -65,19 +65,37 @@ AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent
 	this.menuTargets = []
 
 	this.menuEl = document.createElement("a-box")
-	this.menuEl.setAttribute("scale", ".01 .01 .01")
+	this.menuEl.setAttribute("width", ".01")
+	this.menuEl.setAttribute("height", ".01")
+	this.menuEl.setAttribute("depth", ".01")
+	//this.menuEl.setAttribute("scale", ".01 .01 .01") // breaking moving targets as children
 	this.menuEl.setAttribute("opacity", 0)
 	this.menuEl.setAttribute("color", "red")
 	this.menuEl.setAttribute("wireframe", "true")
+	this.menuEl.id = "handprimarymenu"
 	this.menuOpacity = 0
 	AFRAME.scenes[0].appendChild(this.menuEl)
 
-	let colors =["green", "blue", "orange", "yellow", "brown", "black"].map( (c,i) => {
+	let namedCSSColors = [ "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige", "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown", "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan", "darkgoldenrod", "darkgray", "darkgreen", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick", "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite", "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew", "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgreen", "lightgrey", "lightpink", "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightsteelblue", "lightyellow", "lime", "limegreen", "linen", "magenta", "maroon", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen", "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream", "mistyrose", "moccasin", "navajowhite", "navy", "navyblue", "oldlace", "olive", "olivedrab", "orange", "orangered", "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue", "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan", "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white", "whitesmoke", "yellow", "yellowgreen"]
+
+	//let colors =["green", "blue", "orange", "yellow", "brown", "black"].map( (c,i) => {
+	let colors = namedCSSColors.slice(0,20).map( (c,i) => {
 		let newEl = document.createElement("a-box")
-		newEl.setAttribute("position", "" + ((i+1)*3) + " 0 0")
+		let x = (i/100+.01)
+		let z = -.1 // i%10
+		newEl.setAttribute("position", "" + x + " 0 " + z)
 		newEl.setAttribute("opacity", 0)
+		newEl.setAttribute("scale", ".01 .01 .01") 
 		newEl.setAttribute("wireframe", "true")
 		newEl.setAttribute("color", c )
+		newEl.setAttribute("target", "true" ) // does not work as on same hand
+			// requires to enter a mode, i.e edit mode, that would let it be visible and movable
+			// seems to lose position while rotation does work
+				// wondering if truly empty, should be exclusive events, can't have emptypinch and pinched at the same time
+				// note that getClosestElements() filter out non visible element, but not when opacity is 0
+					// currently we can move now elements that are with opacity 0 yet visible
+				// maybe position works but scale is not taking into account the parent scale, only its position, so we move too little
+					// try to then stick to scale 1 for now then
 		this.menuEl.appendChild( newEl )
 		this.menuTargets.push( newEl )
 	})
@@ -224,6 +242,14 @@ AFRAME.registerComponent('teleporter', {
 	target position=" -0.3 1.35 0" rotation="0 40 0" scale="0.1 0.1 0.1">
       </a-troika-text>
 
+	    <!-- should probably do so for the menu root too -->
+      <a-troika-text anchor=left value="jxr Array.from( document.getElementById('handprimarymenu').children ).map( el => el.setAttribute('opacity', 0))"
+	target position=" -0.3 1.53 0" rotation="0 40 0" scale="0.1 0.1 0.1">
+      </a-troika-text>
+      <a-troika-text anchor=left value="jxr Array.from( document.getElementById('handprimarymenu').children ).map( el => el.setAttribute('opacity', 1))"
+	target position=" -0.3 1.55 0" rotation="0 40 0" scale="0.1 0.1 0.1">
+      </a-troika-text>
+
     </a-scene>
   </body>
 </script>