Hey there! I recently created a component to handle collision detection for primitive and non-primitive shapes. While using the bounding box collision feature provided in three.js, everything was working smoothly. However, when applying it to custom objects, it seems to be causing a slowdown in the overall user experience. Could you take a look at my component and help me pinpoint the issue?
AFRAME.registerComponent('manual-body', {
matchingElements: function(attribute){
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute(attribute) !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
},
tick: function(){
var elements=this.matchingElements('manual-body');
for(var i=0;i<elements.length;i++){
if(this.el.id==elements[i].id){
continue;
}
firstBB = new THREE.Box3().setFromObject(elements[i].object3D);
secondBB = new THREE.Box3().setFromObject(this.el.object3D);
var collision = firstBB.intersectsBox(secondBB);
if(collision){
this.el.emit('collision', {elSource: this.el,elTarget:elements[i]});
}
}
}
});
What do you think could be causing the lag? Is it due to the collision logic within the tick function, or is there another factor at play?
Thank you!