Insert glb objects inside a mesh box and move them independently inside the box

Objective:

Add objects(3d objects created from mesh) inside the room.
Have the ability to move objects within the room.

Current design:
The room is constructed from mesh.(We need to fix the room movement.
The camera is ArcRotateCamera (We are open to suggestion, if this has to be changed)

Current status and issue we are facing:

After adding an object to room we are not able to restrict the object inside the room. Also if you look at the playground attached, the outside surface of “seagulf.glb” can be clicked and moved, but we cannot move the region which is inside the mesh box.
Technically we need to add all the objects inside the box and move it within the box w.r.t. the walls surface of the box.

Here is the playground for a room (Code)

https://playground.babylonjs.com/#046W43

Constraints:
The objects are classified as parent and child(defined by attributes)
The parent can move along the periphery of wall of the room
The child object movement needs to be confined to parent’s boundary.

You are not asking anything, you are describing the project’s specifications :slight_smile:

Want to explain what you can’t achieve?

Hello @RaananW ,
Thanks for your reply.
After adding an object to room we are not able to restrict the object inside the room. Also if you look at the playground attached, the outside surface of “seagulf.glb” can be clicked and moved, but we cannot move the region which is inside the mesh box

Technically we need to add all the objects inside the box and move it within the box w.r.t. the walls surface of the box.

The above mentioned is an issue we are facing. We are trying to do almost the same like the link below.
https://furniture-to-measure.com/pro/2531

First, it would be advised (IMO) to limit the object with walls, and not confine it in a single box. The collisions will be easier to detect. You can then check if the mesh you are dragging intersects with one of the walls and limit its movement.
@Cedric will probably be able to provide a better answer as to how to limit movement during the drag event of the gizmos you are using.

Depending of you use case/datas, you can do many things.
If the room size is known and you don’t need collisions between objects in the room, you can do something simple like this:
https://playground.babylonjs.com/#046W43#2
If you need collision detection between objects in the room, then you will need to use a physics engine.
I suggest ammo for that as you can limit the physics body to not have rotations.

Physics will have the last word on object position. Gizmo will try to move the mesh but physics will constain it.

Regarding wall, I would do 1 box with impostor per wall. Detection will work way better.

1 Like

Thank you @Cedric for your reply. As I see, now the object is bound inside of the room. Thanks so much for this. Now one thing is remaining from this is, as you observed, only upper part of the bird is draggable by mouse which is outside of the box. If we try to drag the lower portion, we cannot, as it is inside the mesh(box). Is there any way so that I can move object placed inside the box by mouse drag? (move mesh within another mesh) Your help will be really appreciated…

I tried to debug but the various scales in the hierarchy made it a bit difficult to see what’s going on.
But I have a work around with gizmo custom meshes:

https://playground.babylonjs.com/#046W43#3

With that, you can see the picking volume and adjust it to your needs.

2 Likes

Hi @Cedric Thank you so much for the help. I almost reached where I need to. Thanks.

2 Likes