Custom canvas size with orbitcontrols and raycaster

As you can see in below image I want my canvas in custom size.
I want to do some other stuff with remaining windows area.
but I also want orbitcontrols and raycaster to work proper.

what is reliable method to do that?

When creating OrbitControls, you should always passing the renderer’s canvas element to the ctor.

const controls = new OrbitControls( camera, renderer.domElement );

Raycasting has to take into account a possible offset of the canvas like so:

const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;