[resolved]How to detect if two objects overlap?

I came again with a question, hopefully not to be hated.:smiley:

I saw an example on the official website of a small square moving along a preset plane and adding it to the plane. Hey! That’s interesting.

I made some changes to the code:

//var rollOverGeo = new THREE.BoxGeometry( 50, 50, 50 );
var rollOverGeo = new THREE.BoxGeometry( 100, 100, 100 );
rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
scene.add( rollOverMesh );

In simple terms, I’ve doubled the size of the square that I can move. Of course, clicking on the added object also doubles the size.

Emmm, I’m going to keep moving. Good, no big problems. So let’s try clicking. Good, no big problem. But as I continue to add squares to the scene, the objects overlap.

I start by adding a point to the object by calculating the distance between the currently hovering position and the point in the other object. But as I increased the number of objects in the scene, my program was running more slowly, which frustrated me.

So I want to ask if there is any better way to solve this problem. Thanks.

PS: the physics engine might work, but I want to know how it works.

There is no real physics engine working here. The code in onDocumentMouseMove() and onDocumentMouseDown() ensures via simple raycasting and math that boxes can only be placed at points where no overlapping is produces. Check out the following fiddle to see the example with boxes twice as big. Especially have a look at the lines which are marked with // Changed.

Oh, yes, and I thought about it at the time, to solve the collision problem. However, this solution is not very friendly, and in doing so I have to limit the grid used for detection to be multiples of the length and width of the object.

I would expect the result to be something like warcraft 3 or starcraft ii. These two games are based on the same size but different number of small grid building floor area, but also have a very friendly detection scheme.

BTW: yeah, I know there’s no physical engine here. What I want to say is that the use of Physijs, cannonjs and so on should be a problem that can be solved for collision detection. But the physics engine was too big for me to understand how to solve the collision problem. So I’m looking for a similar workaround.

If you want to do simple intersection detection without use of a physics engine, you can use the mesh’s bounding boxes to detect intersection with each other:

In order to accurately collide, you will need to apply the mesh’s matrix transform to the bounding box.

box1.updateMatrixWorld();
box2.updateMatrixWorld();
var bounding1 = box1.geometry.boundingBox.clone();
bounding1.applyMatrix4(box1.matrixWorld);
var bounding2 = box2.geometry.boundingBox.clone();
bounding2.applyMatrix4(box2.matrixWorld);

if(bounding1.intersectsBox(bounding2)){
//collision, reject placement
}

I have just written this from memory, I have a working example that I can post later if you like?

1 Like

Sure! I’d love to know how it works, if you’d like.

So @Mugen87’s solution is definitely better for this purpose, but if you wanted to see the box/box collision detection happening I have modified the example below to work.
https://jsfiddle.net/f2Lommf5/11714/

The additional function at the bottom “detectCollisionCubes” compares the objects against each other and returns true/false if it finds they intersect. Ideally the computeBoundingBox & updateMatrixWorld functions would be called once when the boxes are created, rather than each detection like this to improve performance.

Thank you very much! I think I know what to do.

Yes, if it’s the same size square, @mugen87’s solution is indeed a better one. But unfortunately, my current project is made up of blocks of different sizes, so I think collision detection is necessary.

BTW: I just don’t want to use the physics engine, wayward! :slight_smile: