Use getBoundingRect in raycasting examples

[Botchal]

In the raycaster examples (e.g. https://github.com/mrdoob/three.js/blob/dev/examples/webgl_instancing_raycast.html#L112), the mouse coordinates are not calculated correctly. Сode in the example works when the width of the canvas is equal to the width
window. And its position is 0 0.

Code

This is correct example for raycaster with https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect :

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

Screenshots

example.

Platform:

• Device: [Desktop, Mobile]
• OS: [Windows, MacOS, Linux, Android, iOS]
• Browser: [Chrome, Firefox, Safari, Edge]
• Three.js version: [r136]

[Mugen87]

The example makes certain assumptions in order to simplify the code. If you alter these assumptions it is only natural that certain features might break.

I do not vote to add your suggestion code since it would be necessary to add it in all examples which introduces an unnecessary complexity.

[mrdoob]

Сode in the example works when the width of the canvas is equal to the width window. And its position is 0 0.

The canvas width in the example equals the window width and the position is 0 0.

[WestLangley]

Note that .getBoundingClientRect() also includes the padding and border-width, which must zero for the calculation to be exact.