Having trouble adding a Bounding Box from an object in a different module. Everything works fine when I write it all in my main function, but once I create the function in a separate file and import it into the main file, it stops working.
The error message I receive is:
Uncaught TypeError: Cannot read properties of undefined (reading 'updateWorldMatrix')
at Box3.expandByObject (three.module.js:4934:10)
at Box3.setFromObject (three.module.js:4852:15)
at camCollision (camColliders.js:68:37)
at HTMLDocument.<anonymous> (World.js:355:7)
camColliders.js is where I'm trying to place the function, and World.js is my main file.
Below is the function code:
function camCollision() {
const camBB = new Box3().setFromObject(camSphereDetector);
const boule1BB = new Box3().setFromObject(boule1Obj);
boule1BB.name = 'first';
const boule2BB = new Box3().setFromObject(boule2Obj);
boule2BB.name = 'second';
const boule3BB = new Box3().setFromObject(boule3Obj);
boule3BB.name = 'third';
const boulesBB = [boule1BB, boule2BB, boule3BB];
boulesBB.forEach((bbs) => {
if (bbs.intersectsBox(camBB)) {
console.log('got it');
}
});
}
document.addEventListener('mouseup', () => {
camCollision();
});
When attempting this in a separate file, I first import objects from another file which are all Mesh.
It seems that the issue arises because I can't create the Bounding Boxes in a separate file since they need to be added to the scene first, and I only do that in World.js. However, the error points to line 68, with the variable for 'boule1BB', which is puzzling because 'camBB' should be causing the problem first?
This is how I create the Box3 (essentially copying position and size information from GLTF objects, as I'm unable to directly obtain a Box3 from them):
const boule1Obj = new Mesh(
new SphereGeometry(2, 32, 16),
new MeshBasicMaterial({ color: 'red', transparent: true, opacity: 0 }),
);
boule1Obj.position.set(10, -3.5, 0);
My question is, have I correctly diagnosed the issue? Is there a way to create a Box3 in a different JS file, from an object that hasn't been added to the scene yet (even though it should be when the function is called)? Perhaps using a method other than 'setFromObject'? Or am I misunderstanding the actual problem?
To provide some context, the goal is to display information about each model when clicked by the user, intending to use '.name' for each Mesh corresponding to a model. Hence, I prefer not to clutter the main file with these details but rather keep them separate.
I hope this explanation is clear enough and provides adequate detail for a solution to be found. I haven't come across anyone else encountering this issue. If further information is needed, please let me know!
Thank you in advance for your assistance!