Position geometry on camera plane

Questions
,
1

Hey. I am using an orthographic camera (for an already existing model) that renders 3-D images in a webgl. I want to create a 2-D geometry and then position this geometry on the plane of the camera. I have a bunch of code shown below. I tried rendering the geometry just in front of the camera but this doesn’t work properly. Any way to place the image on the camera plane itself and not anywhere in 3-D space just by modifying my code? My code is tightly knit so I can’t use any external packages / models. I am restricted to using .applymatrix() to my geometry and rendering on camera plane:

    var geometry = new THREE.PlaneGeometry(100, 50);

    var axisX = new THREE.Vector3(1, 0, 0);
    var axisY = new THREE.Vector3(0, 1, 0);
    var axisZ = new THREE.Vector3(0, 0, 1);

    var normal1 = cam.position.clone().multiplyScalar(-1);
    var normal2 = cam.position.clone().multiplyScalar(0.95);
    var setObjectPosVec = normal2.sub(normal1);
    var normal3 = setObjectPosVec.normalize();
    //this.controls.noRotate = true;
    var q = new THREE.Quaternion().setFromUnitVectors(axisZ, normal3);
    var matrix = new THREE.Matrix4().makeRotationFromQuaternion(q);
    geometry.applyMatrix(matrix);

    var axisYt = axisY.clone().applyMatrix4(matrix);
    var q2 = new THREE.Quaternion().setFromUnitVectors(axisYt, cam.up);
    var matrix2 = new THREE.Matrix4().makeRotationFromQuaternion(q2);
    geometry.applyMatrix(matrix2);

    var target = setObjectPosVec;
    geometry.translate(target.x, target.y, target.z);

    var material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide, transparent: true, opacity: 0.25 });
    var mesh = new THREE.Mesh(geometry, material);
    this.scene.add(mesh);

Here are examples of what I am looking for (zoomed in and zoomed out). The rectangle should be positioned on the center of the camera view plane.
Zoomed In:

image
image.jpg1847×829 128 KB

Zoomed Out:
image
image.jpg1731×795 59.8 KB

In both cases the rectangle is positioned at the centre of the camera screen plane and zooming in causes objects in the background as well as the rectangle to increase in size and vice versa. Pan and rotate are disabled. Moreover, if the zoom is such that the rectangle intersects with the 3-D geometry, it overlaps the geometry as shown:

image
image.jpg1811×763 108 KB

I also need to implement the same for triangular and circular geometries as well:

image
image.png939×751 35.5 KB

and
image
image.png897×711 34.8 KB

As I am a beginner to three.js I am looking for any and all the help I can get to do this! Thank you for your time.