While experimenting with drawing a box using raycast to track mouse position in the scene, I encountered an issue. Upon clicking, dragging, and releasing the mouse to create the box, I noticed that its position was shifting due to the canvas container's distance on the x and y axes.
An image below illustrates the problem:
https://i.sstatic.net/Fw8Sz.png
The red mark indicates the starting point where I clicked to begin drawing the box, while the blue one shows where I released the mouse. The shift is evident on the Y-axis as I have two rows of components at the top of the page.
Here is some sample code:
<body>
<div>
<button class="btn btn-info" onclick="rotate_x()"><b>X</b></button>
<button class="btn btn-info" onclick="rotate_y()"><b>Y</b></button>
<button class="btn btn-info" onclick="rotate_z()"><b>Z</b></button>
<button class="btn btn-info" onclick="reset_rotation()"><b>Reset</b></button>
<input type="checkbox" name="selection" onchange="selection_mode_change()" checked><b>Selection mode</b>
</div>
<div>
<button class="btn btn-info" onclick="rotate_x()"><b>X</b></button>
<button class="btn btn-info" onclick="rotate_y()"><b>Y</b></button>
<button class="btn btn-info" onclick="rotate_z()"><b>Z</b></button>
<button class="btn btn-info" onclick="reset_rotation()"><b>Reset</b></button>
<input type="checkbox" name="selection" onchange="selection_mode_change()" checked><b>Selection mode</b>
</div>
I'm unsure why this issue is occurring or how to resolve it. Any guidance would be appreciated. Thank you.