Resizing browser, image positioning & performance

[joakim-roos]

Hi,

So I got this issue where my Image with a shaderMaterial won't perfectly center on the screen when resizing the browser. Above it I have a hidden img-element for accessability-purposes. Please give it a try and resize the browser back and forth. Sometimes the Image get stuck either to the left or right of the hidden img-element. Resizing the browser with just a pixel makes it go back in place.

I think this would be a cool idea to further work on (with the hidden img-element on top) only if my mesh for the image would follow the element perfectly.

I have created a simplified sandbox out of one of Pauls sandboxes (Thank you, I've been learning a lot of you).
https://lqzpp.csb.app/

Best,
J

[CodyJasonBennett]

This seemed to lag behind each resize (resizing correctly, but one resize too late — race condition maybe?).

https://codesandbox.io/s/r3f-contact-shadow-forked-8bw74?file=/src/Image.js

Edit: It seems that your Image component is reliant on an image in the dom. I've added its props as dependencies in a useEffect hook and it will update in sync.

const { width, height, top, left } = primaryImage.getBoundingClientRect()

// There's a better way to do this, right?
const [scaleX, setScaleX] = useState()
const [scaleY, setScaleY] = useState()
const [posX, setPosX] = useState()
const [posY, setPosY] = useState()

useEffect(() => {
  setScaleX((width / window.innerWidth) * viewport.width)
  setScaleY((height / window.innerHeight) * viewport.height)
  setPosX(((width / window.innerWidth) * viewport.width) / 2 - viewport.width / 2 + (left / window.innerWidth) * viewport.width)
  setPosY(-((height / window.innerHeight) * viewport.height) / 2 + viewport.height / 2 - (top / window.innerHeight) * viewport.height)
}, [width, height, top, left, viewport.width, viewport.height])

[joakim-roos]

Thanks, it def feels a bit more snappy. Although, If you resize a full screen view of the sandbox you'll notice that the element/mesh sometimes get stuck even though the img-elements position is centered as it should be. Try quicker resizes if you don't see it.

I've logged the left position from getBoundingClientRect here for a reference:
https://codesandbox.io/s/r3f-contact-shadow-forked-nnkmo?file=/src/Image.js

And here's three screenshots that might help.
https://ibb.co/QXXDNKT (left is 435.5 and centered)
https://ibb.co/w4MwHx9 (The mesh is not positionen correctly, left is 459)
https://ibb.co/FsQX1tn (reference to the img-element it should position after/follow)

[CodyJasonBennett]

I'll take a look. My suspicion lies on the above's dependencies.

[CodyJasonBennett]

Looks like updating all of the properties in sync with primaryImage solves the issue. I've updated the above answer and codesandbox.

[joakim-roos]

Thanks it worked great. Had an issue where the Image would jump when hovering after a scroll. Fixed it by setting the posY in a callback and setting the state for it outside of useEffect. There's probably a better way to do it but it works 🥇
Here's the sandbox: https://m7lu2.csb.app/