Tengo un problema al agregar un cuadro delimitador de un objeto en un módulo diferente. En este momento, funciona bien siempre que escribo todo en mi función principal, pero tan pronto como creo mi función en un archivo diferente e importo en el archivo principal, ya no funciona.
El código de error que obtengo:
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 es el archivo en el que estoy tratando de poner la función, y World.js es mi archivo principal.
Aquí está la función:
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(); });Cuando estoy haciendo esto en un archivo separado, primero estoy importando los objetos de otro archivo y todos son de malla.
Creo que el problema es que no puedo crear los cuadros delimitadores en un archivo separado, porque primero debe agregarse a la escena, y solo los estoy agregando en la escena en World.js. Sin embargo, el error me lleva a la línea 68, la variable para 'boule1BB', lo cual es extraño porque 'camBB' debería tener el problema primero.
Así es como estoy creando el Box3 (estos solo están copiando la posición y el tamaño de algunos objetos GLTF, porque no puedo obtener un Box3 de él):
const boule1Obj = new Mesh( new SphereGeometry(2, 32, 16), new MeshBasicMaterial({ color: 'red', transparent: true, opacity: 0 }), ); boule1Obj.position.set(10, -3.5, 0);Entonces, me gustaría saber si entendí bien el problema: ¿hay alguna manera de crear un Box3 en un archivo js diferente, desde un objeto que aún no se agregó a la escena (incluso si debería cuando la función está siendo llamó) ? ¿Con una forma diferente a 'setFromObject' tal vez? O no estoy entendiendo el verdadero problema.
Para un poco de contexto, el objetivo es proporcionar información sobre cada modelo cuando el usuario hace clic en él, y planeo poner la información como '.nombre' para cada malla correspondiente a un modelo. Así que no quiero escribir todo esto en el archivo principal, sino en uno separado.
Espero que esto sea lo suficientemente claro y que haya dado suficiente contenido para encontrar una solución. No pude encontrar a nadie más que tuviera este problema. ¡Si necesitas algo más, por favor dímelo!
¡Gracias ya por tu ayuda!
Creo que el problema es que no puedo crear los cuadros delimitadores en un archivo separado, porque debe agregarse a la escena en World.js.
No tan. Dado que una THREE.Mesh construida tiene una forma con extensiones (a partir de su geometría) y una transformación (por defecto, traducida al origen, sin escala ni rotación), Three.js puede y determinará un cuadro delimitador a partir de esa información como si la malla estaban en la escena. He publicado una demostración de esto en CodePen.
Definir el objeto en un archivo y hacer referencia a él en otro tampoco debería marcar ninguna diferencia, siempre que el objeto esté dentro del alcance y se haya inicializado en el momento en que está vinculado a .
Aquí, sospecho que está asignando boule1Obj, boule2Obj y boule3Obj en World.js. En ese caso, la función importada se eleva antes de que se asignen las variables, y la función se vincula a ellas como no asignadas undefined .
Intente cambiar camCollision() para aceptar los bouleXObj s como argumentos.
function camCollision(...objs) { const camBB = new Box3().setFromObject(camSphereDetector); for(let i = 0; i < objs.length; i++) { const objBB = new Box3().setFromGeometry(objs[i]); objBB.name = `Bounding Box ${i + 1}`; if(objBB.intersectsBox(camBB)) { console.log("Got it!"); } } }Y luego llamarlo como
document.addEventListener("mouseup", () => { camCollision(boule1Obj, boule2Obj, boule3Obj); });