Scene.pick and CSS padding on canvas/container returns wrong position

Questions
1

Hi folks,

I am trying to understand an issue I have with scene.pick based on mouse pointer location.

Note that the red dot represents my mouse location.

When I have no CSS padding or margin on the parent element the position is correctly placed, however when I add a padding to the canvas/container the location is offset by the value of the padding:

mouse-problem

CSS canvas { padding: 0 300px }

I am using the following code:

window.addEventListener(“pointermove”, (evt) => {
var pickResult = scene.pick(evt.clientX, evt.clientY);
// render a grid based on the location of the pick like above
}

I could “fix” this by creating a wrapper that corrects the event location negativly by the amount of CSS padding, but seems like a tedious solution. Does anyone spot an error I am making in my code/assumptions? Maybe I should use another event property?

Thanks for your help!

2

Hello and welcome !

You can try this:

var pickResult = scene.pick(scene.pointerX, scene.pointerY);

2 Likes
3

Thanks LeJohn, that did work. It does have a side effect of the cursor lagging slightly behind, but it looks like thats not a major problem.