I am creating a prototype where I can place objects(2x2 cube) on a grid (4x8 kind layout) and hover them over the grid where the objects snap onto that particular grid section over which the mouse is.
The current problem is that the marker cube at certain mouse positions goes inside the already placed cube which I want to avoid through collisions.
Hi @carolhmj
The previous question was about the grid creation and cube hovering and placement on the grid.
If you check out my current state of the project you’ll see that I am able to do that.
The problem right now is that once I place one or more cube(s). The next marker cube can still partially go into the already placed cubes(thus allowing me to place cubes intersecting each other) which I want to prevent.
There are many ways you can do this collision avoidance, it depends on the final effect you want. You can use colliders, but you can also simply have a flag on each possible “placeable” position that registers if that space is occupied or not.
This is what I want to prevent from happening on the grid. Either the cube just stops at the boundary of the pre-placed cube or turns red or something if it’s intersecting like this.
I tried this code but it’s not working.
if (box.intersectsMesh(box1, false))
{
isPlaceable=false;
}
else
{
isPlaceable=true;
}
You might be able to pick with a ray and get all the meshes that the ray hits. You can then check that list of meshes and if there’s something other than the ground in the list of hit meshes, do something with the box that you’re trying to place (eg. turn it red or prevent its snapped position from changing). Check out the multi-pick section and see if that might work for you: Mesh Picking | Babylon.js Documentation
@carolhmj Yes, I did. It’s similar to raycasting which I’ve used in unity and other webvr platforms. Maybe I’m not able to catch the idea he’s suggesting, thus wanted more clarity on it.
If you’ve got it too, can you please help explain it a bit?
From my understanding, the ray thing will go in only 1 direction (towards the ground), right? Yes, it’s useful for placing but the cube is 2x2 sections which covers extra grid sections around the grid section where my cursor is (1x1).
So, how will it help me prevent the collision of 2 meshes?
Nope, you can create a ray going into any direction one idea would be to cast a ray from the cube’s center to the other cube’s center and check the intersection distance. If it’s equal or smaller than one diagonal of the cube, then there’s an intersection. This would represent this situation:
But I see you tried using intersectsMesh, that should have worked. Can you share what your playground looks like now?
Using rays to check if a box is intersecting a preplaced box will require lots of rays if there are too many boxes placed on the grid. Would it be an efficient way?
Yes @carolhmj , I tried using intersecsMesh but to no effect.
Just to sort of illustrate what I was originally suggesting, one approach could be to have a sort of ray that shoots straight down and checks if a spot had something in it and respond.
It might not be the best approach but it might work.
As far as why the interestsMesh call isn’t working, I believe that it might be related to when you’re possibly calling it. In your code, box1 is a local variable with whatever box your adding on a pointer down. While it’s not the most efficient way to do it, you could keep an array of placed meshes and then check your tentative box against everything in that array. If don’t get a hit, place your block:
var meshes = []
var createScene //...
//...
scene.onPointerDown = function (evt, pickResult)
{
// Check for intersection
let inter = false;
for (let i = 0; i < meshes.length; i++) {
if (box.intersectsMesh(meshes[i])) {
inter = true;
}
}
// If we have no intersections, create box and push to list of meshes
if(evt.button == 0 && !inter)
{
vector = pickResult.pickedPoint;
var box1 = BABYLON.MeshBuilder.CreateBox("object", { size }, scene)
box1.position = new BABYLON.Vector3(snappedPosition.x+(size/2), snappedPosition.y+(size/2), snappedPosition.z+(size/2))
box1.checkCollisions = true;
box1.ellipsoid = new BABYLON.Vector3(10, 1, 10);
meshes.push(box1);
}
}
You might have to tweak some things or add additional logic to account for the edges of boxes but that’s be a way to use intersectsMesh.
Honestly I’d do a predicate on a raycast to only select the ground plane you are targeting, and then have a support 2d array and a parameter to reference the grid size. Get the position of the raycast and convert the coordinates to a local position on the ground mesh and then divide the result by the grid size and floor the results, then check the support array for if the cell is occupied, if not place the new cube if it is do what have you with the cube that is there.
Hope that was not just rambling.
If you can sample a position and then convert it to a more normalized coordinates system things get easier.
@PolygonalSun thanks a lot, intersectsMesh is working now but only partially. It works sometimes and sometimes it doesn’t detect the intersection and still places the box.
For eg, it detects intersection and prevents placement between 2 boxes at point A and if I go place a box at point B( no intersection or boxes there) and come back to point A, it doesn’t detect the collision/intersection and allows the placement anyway.
Is collision detection that resource-heavy that it is not able to keep up its calculation with mouse clicks(not clicking that fast though)?
@Pryme8 Yes, this does make sense, right now I’m trying and learning the collision detection system but I’m definitely going to work on this system later as it seems fool/error proof.
Thanks a lot.
