showFurnitures(filterout) and attachWorldMeshLookAt()

index.html

@@ -5,8 +5,7 @@
     <!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
     <!-- 1.6 needed for real-world-meshing <script src='dependencies/aframe.offline.min.js'></script>-->
     <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-    <!-- <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>-->
+
-    <!-- <script src='dependencies/aframe.offline.min.js'></script>-->
 
     <script src="dependencies/a-console.js"></script>
     <script src='dependencies/aframe-troika-text.min.js'></script>
@@ -20,12 +19,45 @@
 // onreleased does not work on 1.6 yet works on 1.5
 // also minimalist example on event to emit() then receive on component does work
 
+function showFurnitures(filterAwayLabel=""){ // e.g "wall" to avoid walls 
+	// must be done after entering AR
+	Array.from(document.querySelectorAll("[data-world-mesh]") )
+	.filter( el => el.getAttribute("data-world-mesh") != filterAwayLabel)
+	.map( el => el.setAttribute("visible", "true") ) // probably need a mixin first
+	.map( el => el.setAttribute("wireframe", "true") )
+}
+
 function getFurnitures(){
 	// from https://aframe.io/docs/1.6.0/components/real-world-meshing.html
 	worldMeshes = Array.from(document.querySelectorAll("[data-world-mesh]") )
 	// should be done after entering AR
 	worldMeshes.map( el => console.log( el.getAttribute("data-world-mesh") ) )
 // should be use in order to snap onreleased to a specific object, e.g 
+	return worldMeshes
+}
+
+function attachWorldMeshLookAt(){
+	console.log('testing attachWorldMeshLookAt()')
+	let target 
+	Array.from( document.querySelectorAll("[data-world-mesh]") )
+	.filter( el => el.getAttribute("data-world-mesh") != "wall") // avoiding walls 
+	.map( el => {
+		// could probably filter() instead, even querySelector directly
+		if ( el.states.includes( "cursor-hovered" ) ) target = el
+	})
+	if (!target) {
+		console.log('no target entity of semantic label found')
+		console.log('(consider doing room setup again and looking at entity before releasing)')
+	} else {
+		let latest =  selectedElements[selectedElements.length-1].element
+		console.log('putting', latest, 'on', target.getAttribute("real-world-mesh" ))
+		latest.setAttribute( "position", target.getAttribute("position") )
+		latest.setAttribute( "rotation", target.getAttribute("rotation") )
+		// note that this will NOT work well on objects with depth, e.g table, but rather on screens, art piece, walls (even arguable)
+			// could add optional parameter to add "on top of" or other positionning
+				// could be based on the limited type of labels too
+		// could stack, or even add random offsets to void overlap
+	}
 }
 
 function attachFirstWorldMeshFromLabel(label){
@@ -421,8 +453,12 @@ setTimeout( _ => {
 
 	<a-box target teleporter height=".1" depth=".1" width=".1" class="teleportable" material="color: red" position="0 1 -.5" ></a-box>
       <a-troika-text anchor=left value="jxr getFurnitures()" target position=" 0.3 1.25 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left value="jxr showFurnitures()" target position=" 0.3 1.35 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left value="jxr showFurnitures('wall')" target position=" 0.3 1.45 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
 
 	<a-box target height=".1" depth=".02" width=".1" material="color: purple" position="0 1.2 -.5" onreleased="attachFirstWorldMeshFromLabel('table')"></a-box>
+
+	<a-box target height=".1" depth=".02" width=".1" material="color: cyan" position="0 1.4 -.5" onreleased="attachWorldMeshLookAt()"></a-box>
     </a-scene>
   </body>
 </script>