Within the canvas container, the 3D Scene is displayed with no restriction on size or placement within an HTML page layout. Often WebGL examples and apps are designed to occupy the entire screen, filling the canvas completely and matching the layout of the HTML page. However, a WebGL scene can also be integrated alongside other HTML content resembling an image.
Three.js does not consider how the 3D canvas coordinates align with the dimensions of the HTML page. Instead, a separate coordinate system is used inside the WebGL canvas that is independent of screen pixels.
For handling clicks within the 3D canvas, browsers provide pixel values relative to the top left corner of the HTML page (eltx and elty). To interact with Three.js, these HTML mouse coordinates need conversion to WebGL coordinates. In WebGL, the origin is at the center of the canvas, with -1,-1 representing top left and +1,+1 representing bottom right, regardless of the canvas size and position.
The canvas position must be considered when converting mouse coordinates for accuracy, especially if the container is relocated or the HTML body has CSS padding. The formula provided in your explanation assumes the webgl container is positioned at the top left corner of the page (canvas position is 0px 0px).
To determine the relative position inside the canvas, the absolute mouse pixel position adjusted in the previous step is transformed using the given formula. For example, if the mouse x position is 50px and the canvas is 100px wide, the calculation would be (50/100) * 2 - 1 = 0, resulting in the screen space center of the canvas viewport.
By following these steps, you can obtain meaningful coordinates suitable for interaction within the Three.js 3D scene.