Custom canvas size with orbitcontrols and raycaster

Questions
,
1

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?

canvassize
canvassize1920Ă—1032 31.2 KB

2

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;
3 Likes