DOM and WebGL not scrolling synchronously
See original GitHub issueHiii 👋
I’m creating some DOM and WebGL elements (with three.js). I would like having them scrolling synchronously together. In my case there is some delay / lag between DOM elements and the WebGL scene.
This is a part of my code:
locoScroll.on('scroll', ({ scroll }) => {
this.mesh.position.y = scroll.y;
})
The yellow blocks are WebGL and the blue dashed are the DOM elements:
Any suggestions how to fix this?
Issue Analytics
- State:
- Created 3 years ago
- Comments:6
Top Results From Across the Web
Progressive Enhancement with WebGL and React - 14islands
Syncing DOM content with WebGL canvas. A big challenge is to sync the fixed canvas elements with the scrollable HTML content.
Read more >WebGL best practices - Web APIs - MDN Web Docs - Mozilla
Certain WebGL entry points - including getError and getParameter - cause synchronous stalls on the calling thread. Even basic requests can take ...
Read more >Synchronous (non-passive) scroll events - Stack Overflow
Browsers made scroll events asynchronous (i.e. {passive: true} ) a while back. For my use case, synchronous provides a better user experience.
Read more >Scrolling Images With WebGL and Three.js #41 - YouTube
Website is done with React-Three-Fiber, in this stream im just trying to replicate animations with my own knowledge.
Read more >Scroll, Refraction and Shader Effects in Three.js and React
Keeping HTML in sync with the 3D world. We want to keep layout and text-related things in the DOM. · Accessibility · Responsiveness,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I have the same issue, @rutgerbakker95 @mrlss if you guys solved this problem would you please share solution ?
@rutgerbakker95 could you please show code example to see what does mean
adding the scroll.y in a requestAnimationFrame
. I have similar issue and would like to see how to get rid of this, much appreciate it!