Readibility background #76

Consider worked done on https://twitter.com/utopiah/status/1533690234424139779 and https://github.com/AdaRoseCannon/aframe-htmlmesh/issues/4

See existing addBoundingBoxToTextElement() and

Array.from( document.querySelectorAll("a-troika-text") )
  .filter( e => e.getAttribute("value").length>1)
  .map( el => {
  

bbox = el.object3D.children[0].geometry.boundingBox
  
g = new THREE.BoxGeometry(  bbox.max.x-bbox.min.x, bbox.max.y-bbox.min.y, .1  );
m = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
c = new THREE.Mesh( g, m );
el.object3D.add( c );  

el.object3D.children[1].position.z=-.1
el.object3D.children[1].position.x= (bbox.max.x-bbox.min.y ) / 2

})

but based on bbox probably have to axis aligned.

Consider instead document.getElementById("startmesher").object3D.children[0]._textRenderInfo.blockBounds in order to not be axis aligned constrained.

Semi transparent black background solely for the code "editor" to be


Array.from( document.querySelectorAll("a-troika-text") )
  .filter( e => e.getAttribute("value").length>1000)
  .map( el => {
b = el.object3D.children[0]._textRenderInfo.blockBounds
w = b[2]-b[0]
h = b[3]-b[1]

g = new THREE.BoxGeometry( w, h, .01  );
m = new THREE.MeshBasicMaterial( {color: 0, opacity: 0.9, transparent: true} );
c = new THREE.Mesh( g, m );
el.object3D.add( c );  

c.position.z=-.01
c.position.x= w/2


})

See also https://twitter.com/utopiah/status/1641507347150323713 on stringWithPositionFromCoordinates(pos)

Fixed by addBackdropToTroikaElement() in https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/code-editor