How to draw selectable area on a plane?

[ilyaLibin]

Hi, I want to mark areas on a landscape that user can select and perform some actions.
I tried to draw RingGeometry geometry with 4 segments, like this

const geometry = new THREE.RingGeometry(4, 4.3, 4);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
const mesh = new THREE.Mesh(geometry, material);
mesh.rotateX(Math.PI/2)
mesh.rotateZ(Math.PI/4)
mesh.position.set(0, 0.0015, 2)
scene.add(mesh);

But this is not the most flexible way to do so if I want to have shapes other than square.
Basically I want to draw a border on .5 unit white half transparent, and when user hovering the mouse over the border or inner space I want to manipulate it in some way. My current straggle is how to draw it it ne first place.

Attaching the example of what I’m getting

This is an example of what I’d like to achieve

[bhushan6]

You can add one more mesh at same location you have that outline rectangle, just keep the opacity 1 and when user hovers make the opacity 0.

[prisoner849]

There are may ways to put a rectangle on a plane.
One of the is to draw it, modifying the material of the plane: Edit fiddle - JSFiddle - Code Playground

[ilyaLibin]

That looks exactly what I need, thanks!