I have a problem with a website where I am using Threejs. All my problems are solved when I synchronise the scrolling speed of html and canvas. My canvas scrolls much slower than the html, and the divs that are above the models in threejs and are centered over them, are splitting after scrolling ( they are no longer above them perfectly ). Anyone know how to fix this?
I tried to grab the scrolling speed in js, but it didn’t work. I’m wondering about an external library like lenis for example, but I don’t know how to add it to threejs and if it would make sense.
it indeed requires something like lenis. there is no other way because browser scroll and getBoundingClientRect are not in sync. i am not aware of a native solution, scroll has to be controlled by js.
btw, there’s drei/view. threejs lives inside the dom. it tracks whereabouts automatically including css transforms. it takes care of events (accessible in the dom and canvas). every view is in isolation, you can drop whole scenes in there, controls, environments and all.
Also to avoid any confusions: you say your canvas scrolls slower than the HTML. Your canvas shouldn’t scroll at all, its dimensions should match the window dimensions, and you should move the camera based on the user’s scroll.