3d.js 3D collision with raycaster

I am trying to detect the collision of two 2D objects (like two THREE.CircleGeometry) on a plane.

My question is, is there a recommended method for detecting collision of 2D objects? I have 2 attempts below but they are both bad. If anyone has experience with this, could you please help? Thank you in advance.

Here's my first try:

//'player' is the Circle that I'm controlling. In the scene, there is another position-fixed circle, called 'target'.
// I hope to cast a ray from player to the target and detect collision.
// 'mouse' is a normalized direction THREE.Vector3()

raycaster.set(player.position, mouse);
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
    console.log("TEST");
    intersects[ i ].object.material.color.set( 0xff0000 );
}

      

        
        
        
      

    

Obviously it didn't work. I already figured out that raycaster doesn't work on 2D object. (I tested with a 3D object and it worked great).

Here's a second try:

var dis = distance(target.position, player.position);
if (dis < 1) {
target.material.color.set(0xff0000);
}

      

        
        
        
      

    

This method works and I can detect the collision of two circles: the player and the target. HOWEVER , this leads to really bad performance , because there is absolutely no need to check thousands of targets on render ().

If anyone has any thoughts or any recommended reading, could you please advise? I tried searching the web, but most of the tutorials and examples are for 3D collisions. Thanks in advance.