Mark/flag faces of a mesh in Blender and recognize them in three.js

Hello everyone, I’m trying to figure out the best approach for marking some faces of a mesh in Blender then recognizing them in three.js with a raycast.

I’m currently using vertex colors but I’m wondering if there is a better alternative out there. On the Three.js Discord, someone recommended assigning different materials to different faces but that ended up splitting the mesh in multiple meshes when I exported to gltf. Not something I want.

For context: I’m essentially building a walkmesh for a game and I would like to “flag” different areas of the walkmesh and switch to a different camera when the player is above it.

Have you considered ordering the faces (assigning consecutive indices), then assigning different properties based on membership to one of many non-overlapping index-ranges?
After all, this does look like some procedurally generated geometry, so you could assign specific user data to each face as you go along your procedure.

As far as I can google, in Blender there is no way to display or decide face indexes (at least without scripting). If it was possible I could simply use the face index range in three.js for my goals

I found out that you can actually see the faceIndex directly in Blender. So maybe faceIndex range is all I need?