I am new to three.js. How would I add collision to an object/mesh that was created and imported from Blender (gltf)? For example, let's say I imported a building and I want to walk around that building (ramps, stairs, and all) How would I go about doing that? because currently, my player passes through the imported gltf object
I started playing around with adding collision to objects imported from Blender, but it doesn’t seem to work… my player can still go through the mesh. I added collision to my player, and I know it works because I tested the player collision on the native boxes (with useBox) not imported from Blender.
There are perhaps a half dozen physics engines for JavaScript today, including libraries like Rapier.js, Ammo.js, Havok, Cannon.js, and Oimo.js. Each has its own methods to set up "collision bodies", which may or may not be the same as the geometries you display on screen. It's common to create simplified geometries for this purpose, perhaps in a separate glTF file.
Another approach would be navmesh-based pathfinding, see three-pathfinding or yuka.js for this approach.
Finally, a simple data structure like an octree or BVH can be used instead of a full physics engine or navmesh. The three.js examples include a good demo and source code taking this approach: