firefox: uncaught TypeError: this.attributes.position is undefined / chrome: Uncaught TypeError: Cannot read property 'array' of undefined

[quantumalchemy]

Description:

• A-Frame Version: 1.1.0 & master
• Platform / Device: all firefox 81.0 (64-bit) and Chromium 81.0.4044.92 (Developer Build) built on Debian 10.4, running on Debian 10.6 (64-bit) linux
• Reproducible Code Snippet or URL:
  https://artboxvr.com/brooklyn/

** Works NO ERRORs on A-Frame Version: 1.0.4

firefox:
Uncaught TypeError: this.attributes.position is undefined
Aframe 13
computeBoundingSphere
raycast
ki
intersectObjects
checkIntersections
tock
value
onAfterRender
render
value
exports
u
t
index.js:96:18
Aframe 13
computeBoundingSphere
raycast
ki
intersectObjects
checkIntersections
tock
value
onAfterRender
render
value
exports
u
t

chrome:
Uncaught TypeError: Cannot read property 'array' of undefined
at TextGeometry.computeBoundingSphere (index.js:96)
at P.raycast (three.js:8649)
at ki (three.js:34685)
at Ui.intersectObjects (three.js:34733)
at i.checkIntersections (raycaster.js:227)
at i.tock (raycaster.js:199)
at HTMLElement.tock (a-scene.js:764)
at e.object3D.onAfterRender (a-scene.js:53)
at We.render (three.js:18659)
at HTMLElement.render (a-scene.js:798)

RE: /issues/4618
I made all the suggested fixes but same error..
Thanks!

[quantumalchemy]

Isolated to the text attribute .. in v 1.0.4
Worked ok
Any info on this ?

[dmarcos]

Hard to tell. The link provided is a pretty complex application and hard to isolate the issue. If you can provide a simple example to reproduce it will be easier to help. I recommend glitch

[quantumalchemy]

Hard to tell. The link provided is a pretty complex application and hard to isolate the issue. If you can provide a simple example to reproduce it will be easier to help. I recommend glitch

Yeah used the aframe basic bootstrap cant replicate the error weird.
Just not working I'm my app..
Guess i can't use text
Or keep using v 1.0.4 for now : <

[dmarcos]

From the error message. It looks the problem comes from the raycaster and or cursor / laser controls. You'll need a simple test case that uses those to reproduce.

[quantumalchemy]

Thanks will set that up.

[quantumalchemy]

base aframe with reproduced error: Uncaught TypeError: this.attributes.position is undefined
https://jsfiddle.net/scriptgurus/kpaf1bhq/41/

(glitch.com console / debugger never loads / works for me )

see screenshot of chrome .. ** error not occurring every time / 50/50** if you reload / run error occurs

[dmarcos]

What are the steps to reproduce? What OS? What browser version?

I can't reproduce neither on Chrome 87 nor Firefox 83 on Windows 10

I tried to reload the page multiple times and click around and never got the error to appear.

[quantumalchemy]

getting it on .. Chromium 81.0.4044.92 (Developer Build) built on Debian 10.4, running on Debian 10.6 (64-bit) linux

Firefox 81 linux only sometimes
very strange ..
ill load up windows ..
**Getting it also in chrome windows 10
Version 87.0.4280.88 (Official Build) (64-bit)
log:
index.js:96 Uncaught TypeError: Cannot read property 'array' of undefined
at TextGeometry.computeBoundingSphere (index.js:96)
at P.raycast (three.js:8649)
at ki (three.js:34685)
at Ui.intersectObjects (three.js:34733)
at i.checkIntersections (raycaster.js:227)
at i.tock (raycaster.js:199)
at HTMLElement.tock (a-scene.js:764)
at e.object3D.onAfterRender (a-scene.js:53)
at We.render (three.js:18659)
at HTMLElement.render (a-scene.js:798)
TextGeometry.computeBoundingSphere @ index.js:96
raycast @ three.js:8649
ki @ three.js:34685
intersectObjects @ three.js:34733
checkIntersections @ raycaster.js:227
tock @ raycaster.js:199
tock @ a-scene.js:764
object3D.onAfterRender @ a-scene.js:53
We.render @ three.js:18659
render @ a-scene.js:798
(anonymous) @ bind.js:12
u @ three.js:18572
t @ three.js:9830
requestAnimationFrame (async)
start @ three.js:9838
We.setAnimationLoop @ three.js:18582
(anonymous) @ a-scene.js:703
emit @ a-node.js:263
(anonymous) @ a-node.js:128
Promise.then (async)
load @ a-node.js:125
load @ a-entity.js:245
(anonymous) @ a-scene.js:711
setTimeout (async)
play @ a-scene.js:710
attachedCallbackPostCamera @ a-scene.js:164
(anonymous) @ a-scene.js:134
emit @ a-node.js:263
(anonymous) @ camera.js:120
emit @ a-node.js:263
setObject3D @ a-entity.js:156
init @ camera.js:28
initComponent @ component.js:320
updateProperties @ component.js:302
updateComponent @ a-entity.js:490
updateComponents @ a-entity.js:463
(anonymous) @ a-entity.js:249
(anonymous) @ a-node.js:127
Promise.then (async)
load @ a-node.js:125
load @ a-entity.js:245
value @ a-entity.js:88
attachedCallback @ a-register-element.js:160
m @ document-register-element.js:2
l @ document-register-element.js:2
(anonymous) @ document-register-element.js:2
r @ document-register-element.js:2
(anonymous) @ document-register-element.js:2

[quantumalchemy]

well by remove all except login / psw stuff / re-install firefox and chrome on my devel machine (linux Debian)
The prev. error ->
(Cannot read property 'array' of undefined
at TextGeometry.computeBoundingSphere (index.js:96)..) is now gone!
in my code I am updating a ) value
ex. .setAttribute('text', {value: info});
so I knew this it was in the realm of the updated three js lib. with all the tracing error to three
in 1.1.0 very strange -
but getting the error: "THREE.DirectGeometry: Faceless geometries are not supported. three.js:7586:12
Aframe 30"
but at least its not hanging
Thanks for your help!

[dmarcos]

Well done! Not sure what could be causing THREE.DirectGeometry: Faceless geometries are not supported If you can reproduce on Windows I can look into it. Good luck.

[dmarcos]

Is this still an issue? Can we close?

[KaiRo-at]

It looks like I'm running into exactly this issue.

I have (basically) this snippet in my code (I set some attributes on menu as well, and some others on menuitems added in a loop):

let menu = document.querySelector("#menu");
let normalTextColor = "#CCCCCC";
let optText = "Test";
var menuitem = document.createElement("a-box");
menuitem.setAttribute("text", {value: optText, color: normalTextColor, xOffset: 0.03});
menu.appendChild(menuitem);

where the HTML has this element in the a-scene:

<a-plane id="menu" color="#404040" position="0 2 -1" visible="false"></a-entity>

and I run into this error when the menuitem.setAttribute("text", ... line is in there but everything runs fine when it's not present.

The full code is at https://github.com/KaiRo-at/vrmap with the offending line at https://github.com/KaiRo-at/vrmap/blob/master/map.js#L83 (the error does not happen when this line is commented out, but of course the menu items have no text), the running example is at https://vrmap.kairo.at/ which is broken with this issue right now (at least for me in Firefox Nightly).

[dmarcos]

FWIW, your HTML should be <a-plane id="menu" color="#404040" position="0 2 -1" visible="false"></a-plane> Notice the non-matching closing tag.

[KaiRo-at]

FWIW, your HTML should be <a-plane id="menu" color="#404040" position="0 2 -1" visible="false"></a-plane> Notice the non-matching closing tag.

Thanks, that's a good point (interesting that it never caused an issue), but fixing that unfortunately doesn't change experiencing this bug. The code repo and website are updated for this fix now, the bug still occurs, and commenting out that one setAttribute() line confirms it's still what triggers the issue.

[dmarcos]

@KaiRo-at Happy to look at it if you can reproduce with a simpler example. A bit tight on time to debug the whole app. Best of luck

[KaiRo-at]

I found a simple test case. The issue only is seen in connection with the raycaster I have so that it's seen which menu item is being clicked in that menu. Drop this into a .html file to reproduce:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Issue 4742 Testcase</title>
    <meta name="description" content="VR Map">
    <script src="https://aframe.io/aframe/dist/aframe-master.min.js"></script>
    <script>
      window.onload = function() {
        // Load location presets and subdialog.
        let menu = document.querySelector("#menu");
        let mItemHeight = 0.1;
        let normalBgColor = "#404040";
        let normalTextColor = "#CCCCCC";
        let menuHeight = mItemHeight;
        menu.setAttribute("height", menuHeight);
        menu.setAttribute("position", {x: 0, y: 1.6 - menuHeight, z: -1});
        let optText = "Menu Test";
        // menu entity
        var menuitem = document.createElement("a-box");
        menuitem.setAttribute("class", "clickable");
        menuitem.setAttribute("height", mItemHeight);
        menuitem.setAttribute("depth", 0.001);
        menuitem.setAttribute("text", {value: optText, color: normalTextColor, xOffset: 0.03});
        menuitem.setAttribute("color", normalBgColor);
        menu.appendChild(menuitem);
      }
    </script>
  </head>
  <body>
    <a-scene background="color: #CFEBFD">
      <a-entity id="cameraRig" position="0 0 0">
        <!-- camera -->
        <a-entity id="head" camera="active: true" position="0 1.6 0"><a-entity cursor="rayOrigin: mouse;" raycaster="far: 2; objects: .clickable;"></a-entity></a-entity>
        <!-- menu -->
        <a-plane id="menu" color="#404040" position="0 2 -1"></a-plane>
      </a-entity>
    </a-scene>
  </body>
</html>

When either the .setAttribute("text", ...) line, or the .setAttribute("class", "clickable"); or the raycaster in the HTML are removed/commented out, the issue goes away (but of course, functionality is lost in the full VR Map demo).

[kikoano]

I have the same problem. When I use my Web2VR libary with aframe 1.1.0. I use community aframe-keyboard compenent when i add it to a entity that is on the scene i get the error on chrome. If i dont add it to the scene it wont crush. On firefox it only works sometimes after refreshing.
UPDATE:
Only triggers if there are text classes that raycaster checks in the scene. Its so strange in simple tests it works 9/10 times but once you have something more complicated almost always crushes. It works without any errors if your browser tab is in background and it refreshes out of view.

[dmarcos]

Thanks for reporting and the test case. The problem was that the font is loaded asynchronously and there might be cases where the raycaster tries to intersect on the text before it's completely initialized. It should be now fixed. If you can try the master-build and confirm the fix it will be greatly appreciated.

[KaiRo-at]

If you can try the master-build and confirm the fix it will be greatly appreciated.

A local copy of my full VR Map demo works with this build, thanks for the fix! 👍

[ELI7VH]

Hi. I just ran into this issue. the master-build link provided above fixed the problem for me. Any idea on an eta for this to be in a release?

[dmarcos]

@ELI7VH No ETA at the moment. The master build I linked above is safe to use.

[marcelpi]

It worked for me too. Thanks for posting it.