9

There a lot of nice things for collision detection like threex.colliders or code snippets here on questions, but acutally the most stuff is old (some functions like multiplyVector3 are changed and other are removed. I have a Object3D (Character Model) and a World (3D Models: cars, trees, buildings etc.). I can move the Character with the arrow keys (moving it via translateX/Y in a render loop.

What I want is a collision detection between the character model and everything else (except ground and some else). So I need a collision detection between Object3D (Character) and WorldObjects[] (all Objects).

So, now there are a few ways to get the wanted result maybe, which is the best (fast & readable) way to perform this? And now the problem (maybe) if it works: When the Character collides with anything else, how can I stop that he can move in this direction but he can go back, right or left?

Display Name
  • 127
  • 1
  • 2
  • 8

1 Answers1

18

You can detect collisions by using bounding boxes of objects. Bounding boxes are of type THREE.Box3 and have useful methods as isIntersectionBox, containsBox or containsPoint which will suit all your needs when you want to detect collisions.

Using them is as simple as this:

var firstObject = ...your first object...

var secondObject = ...your second object...

firstBB = new THREE.Box3().setFromObject(firstObject);

secondBB = new THREE.Box3().setFromObject(secondObject);

var collision = firstBB.intersectsBox(secondBB);

collision will be true if the boxes are colliding/hitting each-other. This gives you an impression on how you can use bounding boxes.

You can also check this example out. I think it will be very useful for you.

EDIT:

You should maybe also checkout the Physijs library which is a plugin to three.js.

There is someone with a similar question on Stackoverflow that you might want to keep track of.

Wilt
  • 41,477
  • 12
  • 152
  • 203
  • Wasn't in the documentation, that's so simple. Thank you! I already did it for Sphere Bounding Boxes (ax - bx)² + (ay - by)² + (az - bz)² < (ar + br)². – Display Name Feb 11 '15 at 15:06
  • Tried it now, don't works perfect but it's enough for my goal currently. But how can I stop the Character when he hits any object? the var collision is true in the render loop if there is any collision, I move the character there too with translateX/Z & if-keypressed (W/A/S/D). – Display Name Feb 11 '15 at 15:24
  • The code is only for detecting the collision. I guess you have to somehow make the function that you use for movement stop when collision is true. Something like `if(!collision){ ...move object... }` – Wilt Feb 11 '15 at 15:56
  • @DisplayName I added some possibly useful links to my answer. – Wilt Feb 12 '15 at 07:36
  • Thanks, helped me a lot (added physijs now in my code). Got a new question about this, I write it atm. – Display Name Feb 12 '15 at 10:07
  • 1
    THREE.Box3: .isIntersectionBox() has been renamed to .intersectsBox(). – Anton Oct 07 '22 at 12:31
  • @Anton, updated the answer accordingly. Thanks. – Wilt Oct 07 '22 at 17:31