CODEWITHSUNDEEP
javascriptthree.jsaframe
sidd
sidd

Reputation: 669

collision detection using bounding boxes slowing aframe down

Hi I recently made a component for collision detection among primitive and non primitive shapes. I was using bounding box collision provided in three.js.. its working fine but when I am using it for custom objects its slowing the entire experience down... kindly look into my component and tell me whats 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 might be the cause of the lag? is it the collision logic inside the tick function or is it something else.....

Thanks

Upvotes: 0

Views: 701

Answers (2)

W. Murphy
W. Murphy

Reputation: 1151

The method THREE.Box3().setFromObject works by looping over every vertex in a model to determine the bounding box. This is too much work to run every frame in your tick for complex models.

You may want to check out aframe-extras sphere-collider component for efficient, approximate collisions

Upvotes: 2

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

My guess is that three.js is slowing down Your site by adjusting the box boundaries to the custom model.
I would manually add a box entity inside Your model:

<a-entity collada-model="my model">
      <a-box></a-box>
</a-entity>

and make the collision checks with the boxes within. If You are trying to make some kind of physics, try Don McCurdy's Cannon.js implementation, for there is no need to reinvent the wheel :P

UPDATE
If You have issues only with .obj's, and collada's are not causing issues, try converting the obj models to .dae.
If Your issue still exists, try my boundaries override.

Upvotes: 1

Related Questions