computeBoundingBox() on TextGeometry throws exception

[greengiant83]

Calling computeBoundingBox() on a TextGeometry generated by <a-text> throws the following exception

Uncaught (in promise) TypeError: Cannot read property 'array' of undefined
    at TextGeometry.computeBoundingBox (index.js:117)
    at init ((index):14)
    at i.updateProperties (component.js:250)
    at i.module.exports.Component (component.js:50)
    at new i (component.js:449)
    at HTMLElement.value (a-entity.js:391)
    at HTMLElement.value (a-entity.js:558)
    at HTMLElement.<anonymous> (a-entity.js:525)
    at a-entity.js:320
    at a-node.js:117

• A-Frame Version: 0.7.0
• Platform / Device: Windows 10, Chrome 63.0.3239.108
• Reproducible Code Snippet or URL: https://glitch.com/edit/#!/text-bounding-box-bug

[ngokevin]

The geometry of text when used with A-Frame is usually a plane/box which is more appropriate to call the compute bbox on, and it won't match the precise bounds of the text anyways since it can be longer than the text.

I use a formula totalWidth = data.value.length * (data.width / data.wrapCount)

The TextGeometry is probably created by the three-bmfont-text which is sort of a black box, and can't do much about that.

[greengiant83]

Cool. I'll go check out three-bmfont-text and see about putting a bug in over there.

[Adam4lexander]

mrdoob/three.js#13622

I think this may be related. Made a pr on threejs which should fix this issue.

[donmccurdy]

Related: n5ro/aframe-physics-system#74

[dmarcos]

@Adam4lexander Is this fixed after your PR?

[Adam4lexander]

@dmarcos no I wasnt able to resolve it. The problem turned out to be specific to the three-bmfont-text package used in aframe.

[dmarcos]

It seems it was a bug on three-bmfont-text. I’m closing for now but can reopen if there’s anything we should do in A-Frame

[donmccurdy]

Is there a bug filed? Experience-Monks/three-bmfont-text#32? That's partly a design decision, that it uses x/y coordinates in the geometry rather than x/y/z, but it seems to have a bounding box method included to deal with it:

https://github.com/Jam3/three-bmfont-text/blob/master/index.js#L111-L124

if there's no bug for this on the repo let's file one

[NomisGnos]

Is there a solution to this? This will occasionally pop up under console and the error is preventing the page to finish loading. I have to refresh the page to sometimes "get past this error", which is odd to me. I guess it's some type of "order of operation" issue or assets not loading in a timely fashion? Is there a way to not use three-bmfont-text?

[christianvari]

I got the same error. Is there a fix?

[NomisGnos]

@christianvari #4618 (comment) seemed to have fixed my issue. <a-cursor raycaster="objects: .insert-class-name-here-that-is-clickable" ... I haven't tested it long enough but so far, it was working for me.

[christianvari]

@NomisGnos thank you for your reply. The problem is that I havent a raycaster or a cursor. I need to compute the bounding box of an aframe entity that contains an a-text.

[da4throux]

@christianvari did you find any way around ?
I have a similar issue, and ended up creating a simple shadowText that would load faster, and have setTimeout on it to measure its height, so that I can position other elements later vertically relative the height of the text...
It was kind of working, but trying now to switch to offline fonts, and it fails a lot more than before.
I was hoping to find something I could monitor that would confirm the element is fully compute but could not find anything so far.

[djoksimo]

hi, is there a fix for this issue yet?

I've been jumping across several Github issues and different repositories, and I can't seem to find a universal fix 😢. I found a few issues pertaining to raycasters and <a-cursor>, but that doesn't apply in my case.

I'm experiencing the issue with:

const text = this.el.components.text;
text.geometry.computeBoundingBox();
const textWidth =
  ((text.geometry.boundingBox.max.x - text.geometry.boundingBox.min.x) /
    text.currentFont.widthFactor) *
  0.025;
this.indicatorImage.object3D.position.setX(-(textWidth / 2 + 0.02));

I'm on Aframe VR version 1.2.0 and had the same issue with older versions. The error occurs on different browsers (Edge/Chrome on macOS and Windows).