I have successfully created a collision detection system that allows users to place objects at the raycaster/mouse position on a floor. By clicking on the 'Add object' button, a helper object is generated to follow the mouse and check for collisions with existing objects. When the user clicks on their desired position, the new object will only be placed if there are no collisions.
My collision detection system works perfectly when both objects in question are of the same size.
In the accompanying screenshot, you can see a large object and a small (red) helper. The red color indicates a collision, which then turns green when the mouse is moved to the right.
However, I am facing an issue where my collision detection system only works when two objects are of equal size. How can I make it work with objects of different sizes?
https://i.sstatic.net/lgLUz.png
Below is the code snippet for displaying the big object upon a click event:
var geometry = new THREE.BoxGeometry(200, 200, 300);
var bigobject = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
color: 0xFBF5D7,
opacity: 1
}));
bigobject.position.copy(intersects[0].point);
bigobject.position.y = 100;
objects.push(bigobject);
scene.add(bigobject);
Here is the code snippet for showing the helper when the 'Add object' button is clicked:
var geometry = new THREE.BoxGeometry(50, 50, 100 );
helper = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00, opacity: 1 }));
helper.name = 'helper';
scene.add(helper);
And here is the code snippet for detecting collisions in the MouseMove event:
if(scene.getObjectByName('helper')) {
helper.position.copy(intersects[0].point);
helper.position.y = 25;
var helperWidth = helper.geometry.parameters.width;
var helperLength = helper.geometry.parameters.depth;
var validpositionObject = true;
for (var i = 0; i < objects.length; i++) {
var objectWidth = objects[i].geometry.parameters.width;
var objectLength = objects[i].geometry.parameters.depth;
// Checking for collision
...
}
if (validpositionObject === true) {
helper.material.color.setHex(0x00ff00);
validposition = true;
} else {
helper.material.color.setHex(0xff0000);
validposition = false;
}
}
I am struggling with the placement of objects when they have varying sizes. Any help or guidance would be greatly appreciated. Thank you.