Concave/Convex Bounding Boxes?

So my issue is this: I am working on a first person game in three.js and using imported .gltf / .glb models for the levels. I want to use bounding boxes to cordon off areas where the player shouldn’t be able to move. Right now, there is a house model that I’m using for the first level, so the walls of the house should have bounding boxes around them so the player can’t walk through them, but the open doorway should not.

The problem is that if I traverse the house’s meshes and use the bounding box’s setFromObject function of each on them, there is no allowance for convexity/concavity: it just makes a box around the mesh’s location. This results in a whole box around an open door way, for example, which means the player cannot enter the house.

For the first level (the house) I solved this by hardcoding the position of 40 bounding boxes to mark where the player should not be able to walk through. This works perfectly, but is obviously not ideal as it is time-consuming and the hard-coded nature of the boxes makes things more difficult to change than they should be. Does anyone know of a way to create a bounding box which conforms to a loaded object’s dimensions in this way?

Have you considered to use a navigation mesh to restrict the movement of the player? This is a very fast approach and it also allows you to author the navigation mesh in a DCC tool like Blender. A live example looks like so:

Box3 is nothing else than an AABB which is always an axis-aligned box. However, three.js also provides ConvexHull which can be used to generate convex geometries for a given set of points. You can also perform basic ray intersections tests with the convex hull. Intersection tests with other bounding volumes (AABB, OBB, bounding sphere) are not yet supported.

Thanks for your response! The ConvexHull could be just what I need, since it does have a containsPoint method which is what I was using with the bounding boxes to check for the player. There does not seem to be a ConvexHullHelper which can show me where the hull gets created, though. Do you know how I might do that, or are they visible by default? (If visible by default, can I just hide them by setting .visible to false without impacting their behavior?)

If the convex hull approach doesn’t work out, the navigation mesh also looks promising. Are there any resources you could point me to that walk through how to create the nav mesh in Blender and then import it into my scene using your Yuka library?

Thanks again for your quick response and helpful advice!

It’s a pure mathematical representation so similar to AABBs they are not renderable. However, you can use the same approach like ConvexGeometry to generate vertex data:

You need to use a Blender version < 2.8 if you want to autogenerate a nav mesh (there are existing videos and tutorials about this topic in the web). Otherwise you have to do this manually. If you export the mesh to glTF, you can load it with Yuka’s NavMeshLoader. There are no tutorials so far but the linked examples is a good code template. Yuka’s examples are structured in the similar fashion like the three.js ones.