Three JS detect multiple moving object collision

Question

I currently have multiple objects, each moving forward randomly like this

model.lookAt(position_x, 0, position_z);

setInterval(function(){
   model.translateZ(0.015);
}, 10);

I need each object to avoid crashing into each other during forward movements. I found this solution suggesting bounding boxes for collision detection but it only seems to be for collisions between two objects:

How to detect collision between two objects in JavaScript with Three.js?

Is it possible to have multiple objects each having their own collision detections?

Thanks!

You should use a physic engine for this. Check out Cannon.JS or Oimo.JS — Julien
– Julien, Commented Dec 18, 2021 at 13:34
But using a physics engine is quite heavy when I only need simple collision detection though. — user2028856
– user2028856, Commented Dec 18, 2021 at 13:45
If you want a simpler solution and you don't need 3D collision, you can use a 2d physics engine. If you want to keep your solution with Box3 and isIntersectionBox, the only thing you have to do is to make a loop. You keep all your objects in an array, and at each frame, you check for all your objects if they collide with one of the objects — Julien
– Julien, Commented Dec 18, 2021 at 13:49

Julien · Accepted Answer · 2021-12-18 14:03:10Z

2

Here's how you could do it :

var objectA = ...your first object...
var objectB = ...your second object...
var objectC = ...your first object...
var objectD = ...your second object...

firstBB = new THREE.Box3().setFromObject(objectA);
secondBB = new THREE.Box3().setFromObject(objectB);
thirdBB = new THREE.Box3().setFromObject(objectC);
fourthBB = new THREE.Box3().setFromObject(objectD);

const BBs = [firstBB, secondBB, thirdBB, fourthBB];


// at each frame, you could do this to check if some objects are colliding :
BBs.forEach(bb => {
  // Filter out this bb from BBs
  const otherBBs = BBs.filter(other => other !== bb)

  // Check if any of the other BBs intersects with this bb
  otherBBs.forEach(other => {
    if (bb.intersectsBox(other)) {
      // Collision ! Do something
    }
  })
})

edited Dec 18, 2021 at 14:03

answered Dec 18, 2021 at 13:54

Julien

8527 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2028856 Over a year ago

Thank you for this answer, does this mean on each transition frame, every object performs an intersection check against every other object in the array? If I increase to 50 - 100 objects, would this be more resource intensive than the physics engine?

Julien Over a year ago

With 50/100 objects you will have no performance problems with this method. Here it's a simple bouding box overlapping check, so it's not really performance intensive. If you are curious you could make a benchmark to compare this method with the use of a physical engine.

user2028856 Over a year ago

I notice that the box min and max values from from setFromObject remains static even after moving the original object. The only way is to call the setFromObject again to get the updated values. So does this mean on each transition frame, each object's BB need to re-calculated from setFromObject first?

Collectives™ on Stack Overflow

Three JS detect multiple moving object collision

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related