Custom canvas size with orbitcontrols and raycaster

Questions
,
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