CODEWITHSUNDEEP
javascriptthree.js
user2028856
user2028856

Reputation: 3183

Three JS detect multiple moving object collision

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!

Upvotes: 1

Views: 1408

Answers (1)

Julien
Julien

Reputation: 852

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
    }
  })
})

Upvotes: 2

Related Questions