Rotate object to match raycasted face rotation

Questions
1

Hi, I’m new to threejs so bear with me :smiley:

I want a 2D object (RingGeometry) that follows the mouse cursor and rotates to look like it is flat against the surface of any object it hovers over.

I have a raycaster that gets the intersecting object:

let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(new THREE.Vector2(pointer.x, pointer.y), camera);

let intersects = raycaster.intersectObjects(scene.children);
if (intersects.length) {
  //interects[0].face.normal
}

It’s at this point that my three.js / geometry knowledge is lacking.

Is it possible to apply the face normal vector to the cursor object? I’m basically trying to say if the intersecting face is facing 30 degrees to the left, rotate the cursor object 30 degrees to the left.

I may be going about this completely wrong so any advice appreciated.