0

I'm working on a project on 8th Wall using A-Frame and Three.js.

I'm using a component called "text-geometry" which generates extruded text nicely. But I want the text to be centered, not "flush-left", so I need to move it left by half its rendered width. I'm doing this using a bounding box:

bbox = new THREE.Box3().setFromObject(mesh)
el.object3D.position.x = (bbox.min.x - bbox.max.x) / 2

The problem is that if the text is nested within several levels of a-entities each with its own scale, the centering is incorrect.

So I am crawling up through all nested entities to find the "true scale":

let [trueScale, ee] = [1, el]
while (ee.parentElement) {
  const scale = ee.getAttribute('scale')
  if (scale) { trueScale *= scale.x }
  ee = ee.parentElement
}

This seems inefficient – is there a more elegant way to do this so that my bbox returns the correct width accounting for the 'effective' scale of the text entity?

Dan
  • 1,257
  • 2
  • 15
  • 31
  • It seems like currently you are getting the local scale but need the world scale. Have you tried checking if the scale in `ee.matrixWorld` is the same as `trueScale` which you calculate by hand? You can do something like `ee.matrixWorld.decompose(p, q, s)` where `p / q / s` are objects you create right above it. [Object3D.matrixWorld docs](https://threejs.org/docs/?q=object#api/en/core/Object3D.matrixWorld). – bluepanda Apr 13 '23 at 04:21

0 Answers0