My goal is to render two separate objects over top of one another, detect which faces collide with faces from the other object and hide them, so that only the faces which to not collide with a face from the other object are visible. Is this possible in Three.js?
My thought was that I could do a raycast from each face, but I think there are a few problems with this. For example, from where on the face would I cast the ray to ensure I detect the the collision?
Does anyone have any ideas for how to accomplish this?
Maybe “collide” was the wrong choice of word here: Two separate objects will be rendered in the same place. I want to detect which faces intersect/overlap with faces from the other object and hide both so that I am left with only the faces that don’t intersect with faces from the other object.
You can represent a single face as an instance of THREE.Triangle. Based on this class, you could implement a new method .intersectsTriangle() that performs a triangle-triangle intersection test. If two triangles intersect, you hide the respective faces.
There are some resources and papers about this topic. You might want to start here: