JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<canvas></canvas>
<div>Toggle scale <input type="checkbox" /></div>

CSS

body{
    background: #333;
    color: #FFF;
    font: bold 16px arial;
}

JavaScript

const
	scale = 2,
  [width, height] = [500, 300],
  canvas = document.querySelector('canvas'),
  scaleCheckBox = document.querySelector('input')
;

canvas.width = width;
canvas.height = height;

const
  scene = new THREE.Scene(),
  renderer = new THREE.WebGLRenderer({canvas}),
  camDistance = 5,
  camFov = (2 * Math.atan( height / ( 2 * camDistance ) ) * ( 180 / Math.PI )),
  camera = new THREE.PerspectiveCamera(camFov, width/height, 0.1, 1000 )
;

camera.position.z = camDistance;

const
  texture = new THREE.TextureLoader().load( "https://picsum.photos/500/300" ),
  imageMaterial = new THREE.MeshBasicMaterial( { map: texture , side : 0 } )
;

texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

const
  planeGeometry = new THREE.PlaneGeometry( width, height ),
  planeMesh = new THREE.Mesh( planeGeometry, imageMaterial )
;

const
  zoomGeometry = new THREE.BufferGeometry(),
  zoomMaterial = new THREE.MeshBasicMaterial( { map: texture , side : 0 } ),
  zoomMesh = new THREE.Mesh( zoomGeometry, zoomMaterial )
;

zoomMaterial.color.set(0xff0000);

zoomGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([
  0, 0, 0,
  0, 0, 0,
  0, 0, 0,
  0, 0, 0
]), 3));

zoomGeometry.setIndex([
  0, 1, 2,
  2, 1, 3
]);

scene.add( planeMesh );
scene.add( zoomMesh );

function setZoomBox(e){

  const
    size = 50, 
    x = e.clientX - (size/2),
    y = -(e.clientY - height) - (size/2),
    coords = [
      x,
      y,
      x + size,
      y + size
    ]
  ;
  
  const [x1, y1, x2, y2] = [
    coords[0] - (width/2),
    coords[1] - (height/2),
    coords[2] - (width/2),
    coords[3] - (height/2)
  ];
  
  zoomGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([
    x1, y1, 0,
    x2, y1, 0,
    x1, y2, 0,
    x2, y2, 0
  ]), 3));
  
  const [u1, v1, u2, v2] = [
    coords[0]/width,
    coords[1]/height,
    coords[2]/width,
    coords[3]/height
  ]
  
 ...