title: How to detect collision of ball with skewed edge? (THREE.js)
body: <p>My assignment: Make 8-ball billiards with the use of THREE.js.
  (disclaimer, I have never played the game in real life, so I don't know how everything is called)</p>
  
  <p>The problem: Near the holes where the ball has to go into there is an edge that isn't horizontal or vertical. I currently detect the collision with the edges by setting a raycaster in on the X+, X-, Z+ and Z- axis and check for the distance with an object that is less than the radius of the ball.</p>
  
  <p>But this doesn't work when edges aren't straight (see image below). I thought I could set a raycaster in the direction it is going, and another towards the normal of the face that it is going to intersect with, but the center of a ball can miss the face while the edge is going to intersect with the edge. I could set a raycaster in many more directions, but I don't want to take up too many resources. Does anyone have an idea how this could be done?
  <a href="https://i.stack.imgur.com/MYOl3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYOl3.png" alt="enter image description here"></a></p>