So I’m trying to create an object and add it to the scene. The only issue is, the object outputs an error of
Cannot read properties of undefined (reading 'elements') Line: 1172
Whenever I look at where the object is supposed to be. I narrowed the error down to this snippet
FYI, item, pickupMaterial, and position are not undefined as I did print them out and everything looked fine.
function createPickup(position, itemId) {
const item = itemDict[itemId];
const pickup = new THREE.Mesh(pickupGeometry, itemDict[itemId].pickupMaterial);
// alert(`${JSON.stringify(item)}\n${item.thumbnail}`);
pickup.position.set(position.x, position.y + 0.5, position.z);
scene.add(pickup);
}
In devtools console you can click the line number on the right hand side to jump to the error line directly - it’ll show you what property it’s trying to read the .elements from.
that doesn’t help, none of the lines mentioned in devtools are from my code
(im just gonna revive this since I came across this problem again and my post is apparently the first result that pops up)
Long story short - this error means you’re passing undefined to places in should not be passed to (it’s a JavaScript error, not three.js one.)
The only one who can solve the issue right now is you, since it’s happening in your custom code, and you didn’t show what the specific values are - and you didn’t share any additional information about the issue. Try creating a codepen reproducing the issue - that way it’ll be more feasible to help 
2 Likes
This error “cannot read properties of undefined …” frequently occurs, when you’re trying to access a resource which you loaded (asynchronously) and which isn’t available yet at the time you’re trying to access it. Hence it’s undefined but might be available at some later time if you wouldn’t run into this error before.
One way to safeguard against such errors is, to check for availability first, before really accessing the resource, something like this:
if ( resource ) {
// do something with resource
}
// else: continue without resource
In order to periodically re-check, you may want to place this piece of code inside your render loop.
Related: javascript - In if statement,undefined equals with false - Stack Overflow
It seems like a some people aren’t understanding this question (i probably should have explained this first), but the error is not directly in my code; its with the three js module itself where I think it just fails to render certain areas when my camera is at a certain angle
here’s the error (I’ll put the game up later but i just wanted to post to give an idea):
quick edit: the stack trace goes all the way back to whenever I run renderer.render(scene, camera);
Aight so here is the website:
WALLS 95, just rotate the camera around and move around and parts of my map just start dissapearing
GitHub - jessewithoutani/walls95-3d
^^ code if you wanna look at it, it’s very messy so gl
I mean, fight it as you will, but statement stands - the error’s in your code 
As above - you’re passing something to the three.js rendering loop that shouldn’t be passed there.
Console log values of (1) meshes, (2) geometries, (3) materials that you’re adding to the scene (or just replace renderer.render(...) with console.info(scene.children) in the render loop, effect’s the same.) Check if everything looks ok - if none of the meshes has geometry or material set to undefined or null.
Also make sure values of .matrix and .worldMatrix are non-non and non-undefined - if at any point you’re setting them manually.
1 Like
all of them that should have them are defined; I haven’t changed the matrices manually either
one more piece of information which may or may not help, the object named LEVEL is what’s causing issues
Just tried the site.
When there is a waterfall of error messages, look for the top-most. It is the zero patient. All the next errors are cascading post-errors and sometimes they are not indicative at all.
In your case, the very first error message is about one of the shaders that is not compiled. This is one of the hardest errors to track, because it means some bad data leaked into Three.js and forced it to build a wrong shader. It looks like it is some bug related to textures and UV coordinates, but in my experience what it looks like is not always what it is. This error is hard, because it happens in one place, but the cause is in a very different place.
My suggestion:
- first try the latest Three.js (just change the importmaps)
- then remove pieces of the code one by one and check whether the same error persist - at some point the error will disappear and this will indicate what part of the code or what feature of the objects caused it
For your reference, here is the first error message that I see (the cannot-read-properties-of-undefined error message pops-up later on):
2 Likes
i just realized the issue 
i feel so stupid rn
i accidentally set this as a texture for my tiles
3 Likes
