Description

I am trying to make 2 objects to collide each other. The collision I am trying to make detects weather the 2 objects are touching / intersecting each other by first calculating their Box3(boundingBox) and then using the .intersectsBox() function to return a boolean value.

Using a physics engine didn’t do any good because I am using DragControls and DragControls do not update the position of the RigidBody. I am expecting something like this:

Example of Collision

Code

Here, obj1 is the first object and is a BoxGeometry and obj2 is the second object and is also a BoxGeometry. When obj1 intersects obj2 the .intersectsBox() return true as the boolean value.

const obj1 = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshBasicMaterial());
const obj2 = new THREE.Mesh(new THREE.BoxGeometry(2,5,2), new THREE.MeshBasicMaterial());

const obj1Box = new THREE.Box3().setFromObject(obj1);
const obj2Box = new THREE.Box3().setFromObject(obj2);

box1.intersectsBox(obj2);

What I tried

I tried a storing the previous position of obj1 and when it intersects obj2 I check the current position and then set the position of the obj1 to the non-colliding previous position. I was unable to make this logic work.

What I require

If someone already has a codesandbox regarding this, please do help me out using that, also if possible an answer in react-three would would save me a loads of time, but vanilla three.js will also work.