Tips on Aligning Meshes to Bounding Box

I have a project where I have a staircase with treads moving in multiple directions along the x, y, and z axis. Currently I am struggling with having my walls around the stairs dynamically updating as each step is an iteration of a stair tread gltf that is being cloned and moved. So I am tracking different treads to pass to the sizing to the walls that I have around it.

I was thinking about how much easier it would be if I could just put the staircase inside a group where the bounding box would dynamically update size with the number of stairs in each flight and then have the walls ‘lock’ onto the bounding box.

I know there isn’t a function to do exactly that, but I am wondering if my idea is a viable solution to have the mesh take dimension and position values from the bounding box and update their sizes accordingly?

I’m quite new to threejs and definitely a bit out of my depth, thanks for the patience!

How I’m currently doing it without my idea above
Walls.js (5.3 KB)
UStair.js (5.3 KB)

Greetings!

I think this can be done if you organize a check for changes in the bounding box in the main animation loop.

Post the entire code of the project so that I can see how to do this in your code.

Here’s the full project
https://github.com/willyBaller/PricingCalculator
Thanks for your help!

The main animation loop is in src/scenes/MainSceneSetup.js

The tricky part here is that the group could have an arbitrary rotation which would give you a world space bounding box that probably isn’t what you want. (For instance the staircase rotated 45 degrees would give you a larger bounding box than the stair rotated 90 degrees, if that makes sens).

Instead, you want the bounding box in the space of the parent group itself, for which there is no built in function.

To do it manually you could reset the groups position and rotation, to 0,0,0, then do let theBounds = new THREE.Box().setFromObject(group),
and then restore the position/rotation of the group.

2 Likes

Does this project already have a ready-made scene for testing? I don’t see her…

Would OBB serve this purpose?

2 Likes

The scene is generated through the src/scenes/MainSceneSetup.js, in the MainSceneSetup class which is called into the main.js which functions as a boilerplate to launch, if that’s what you’re asking?

yes, now I see