Scrollbar offsets Raycaster

If I add padding (or keep the default 20 px padding) to body, a scroll bar appears. When there is a scroll bar, I need to scroll down halfway through the scrollbar in order not to have some offsetting of the intersection. For example, the attached screenshot is with 20 px of padding (and a roughly proportional scroll bar!). Circled is where my cursor was, but then the green sphere is where the actual intersection occurs. Any thought of how to work through this? I just reduce the padding as much as I can, then there are minimal issues. One way I could solve this is figure out some way of having my content compress to the size of the panel, but I feel like there should be another way.


Usually, I use in CSS:

body {
  overflow: hidden;
  margin: 0;
1 Like

Thanks for responding! I have padding/margin of 0 and overflow hidden now, and things seem really well-aligned, even when I resize. I’m just surprised that raycasting isn’t more ergonomic, but I guess converting a client coordinate to the space that THREE.js is in is very technical. :frowning: