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