Aframe: Cannot read property 'array' of undefined TextGeometry computeBoundingSphere error

[jgutierro]

Description:
I'm getting an error with the cd01cec version.
On this url you can see the error when you focus the pointer on the green marks

index.js:96 Uncaught TypeError: Cannot read property 'array' of undefined at TextGeometry.computeBoundingSphere (index.js:96) at H.raycast (three.js:11367) at Fa (three.js:46525) at Ba.intersectObjects (three.js:46600) at i.checkIntersections (raycaster.js:226) at i.tick (raycaster.js:198) at HTMLElement.tick (a-scene.js:719) at HTMLElement.render (a-scene.js:769) at bind.js:12 at m (three.js:25084)

With version 1.0.4 this works fine, but VR is not working on iOS 13.4.1...

• A-Frame Version: cd01cec35a01e03eb2d6a9272500a53de31d3828
• Platform / Device: iOS 13.4.1
• Reproducible Code Snippet or URL: https://app.estudiocactus.com/rak/

[vincentfretin]

Ah yeah I have this error on master too. I forgot to create a separate issue for it.
I put the traceback in comment https://github.com/aframevr/aframe/pull/4588#issuecomment-628750328
I narrowed it down to the update of super-three from 113 to 115.1. I'm currently using aframe master with downgrade of super-three to 113.
So the culpurit is not an aframe commit, it's a commit in three.
I didn't have time to look further into it.

[vincentfretin]

The error seems to be in three-bmfont-text, something must have changed between super-three 113 and 115.1 that cause the error in three-bmfont-text.

[vincentfretin]

I can't reproduce on my project now... weird.
The issue for me was triggered on a <a-text> component that was shown when the parent entity had mouseenter. I have mainly those entities in my scene using text:

        <a-entity position="-0.56 5.7 -2.18" rotation="0 17 0">
          <a-plane class="clickable" height="0.71" width="1"
            material="src:img/anImage.png; shader: flat;"
            toggle-child-visibility-on-mouseenter                               
          >                                                                     
            <a-plane material="color: #111; shader: flat;" visible="false" width="1.2" height="0.15" position="0 0.44 0">
              <a-text position="0 0.015 0" scale="0.5 0.5 0.5"                  
                align="center"                                                  
                value="Some text"                                     
                font="../dist/custom-msdf.json"                                 
                negate="false"                                                  
              ></a-text>                                                        
            </a-plane>                                                          
          </a-plane>                                                            
        </a-entity>

Nothing fancy.

For reference, there was a similar issue some years ago #3318

[vincentfretin]

I may have changed something in my project during this past month and the error doesn't trigger anymore for me.
@jgutierro Can you please try to create a very small example with https://glitch.com where you reproduce the issue?

[vincentfretin]

Please note I was having the issue on both firefox and chrome desktop, but not every time if I remember. :)

[vincentfretin]

I see @NomisGnos has the issue sometimes too
https://github.com/aframevr/aframe/issues/3318#issuecomment-642024539

[vincentfretin]

For the index.js:96 Uncaught TypeError: Cannot read property 'array' of undefined error, this is acutally the position attribute that's undefined. See code here https://github.com/dmarcos/three-bmfont-text/blob/7afd1e480bde20e745d8536ef2f234db80e472fc/index.js#L96

For the traceback, I see Mesh.raycast (three.js:11367) so it tries to raycast the a-text component.
Ah I did fix an issue with my project where "objects: .clickable" was actually missing in my raycaster component because I defined only cursor="fuse:false" component and it implicitly create a raycaster component with not config. Then after a delay I was setting raycaster="objects:.clickable". So during the delay, all the entities in the scene was raycastable (including <a-text>), so this could explains the random issue.
To avoid the issue, you shouldn't raycast <a-text> but a simple <a-plane> as the parent.

[vincentfretin]

@jgutierro I see you have the following warning on your page
[raycaster] For performance, please define raycaster.objects when using raycaster or cursor components to whitelist which entities to intersect with. e.g., raycaster="objects: [data-raycastable]"
By fixing this warning, this should fix the issue.
I see you use <a-cursor, it may create a raycaster component without config, try to add raycaster="objects: .link" on it too.

[jgutierro]

Hello @vincentfretin adding raycaster="objects: .link" to my <a-cursor solved the issue! thank you so so much for your amazing and dedicated support and help!