Can you help me to get this onClick event to work

Questions
1

Hey! For the last few days I’ve been struggling with an onClick event in r3f. To make things simpler I used this premade sandbox to show the issue I’m running into: Flexbox/Yoga in Webgl (forked) - CodeSandbox

When you take a look at the Geo part you can see that I tried to embed a hyperlink. However, while the hyperlink text appears, I can’t seem to get the actual onClick event to work. I know that external links are a challenge for r3f but it still would be amazing to get this to work. I tried using @react-three/drei HTML and while that does make the link clickable I can’t really embed it into the site like all the other text.(Flexbox/Yoga in Webgl (forked) - CodeSandbox)

Any help would really be appreciated!

Best

2

this isn’t the onclick you’re struggling with, there is a dom layer in front of the canvas (for scroll). when you have two absolute dom nodes, then only the outward will get events, the inward layer won’t. for both dom and canvas to receive events they need to share the same parent which needs to be the event source for both. for that to work with a scroll-area it gets very tricky because scroll works differently, it needs actual browser/css hacks.

to cut it short, all of this has been solved with drei/scrollcontrols

you can either update all the packages and fix it with that, or you re-build it with better primitives. drei has tons of helpers now that make mixing html and canvas feasible. i would prefer that over a wasm flexbox implementation in the canvas with sdf text tbh.

2 Likes
3

It looks like the drei text helper doesn’t have an onClick property?

@drcmda will likely know more about the r3f setup than me though

1 Like
4

it inherits from THREE.Mesh. text can definitively be clicked. like so Spherical word-cloud - CodeSandbox as i said it’s just a dom element covering the canvas and swallowing the pointer events, this is a dom/css issue.

1 Like
5

Thanks all so much for the help - I guess it makes sense to rebuilt the whole sandbox from scratch.

6

If I were to stick to the old sandbox configuration, would I just replace the <div className="scrollArea" ref={scrollArea} onScroll={onScroll} onPointerMove={(e) => (state.mouse = [(e.clientX / window.innerWidth) * 2 - 1, (e.clientY / window.innerHeight) * 2 - 1])}> <div style={{ height:${pages * 100}vh }} /> </div>

with <Scroll> and <ScrollControls> from Drei? I know rebuilding would be much smarter but I don’t really know how to go on about replacing the flexboxes and restructuring the site.

7

Oh and btw thanks so much for all the tutorials you made/sandboxes online - it’s really magnificent for a r3f starter!!

8

yes, i think the old scroll area stuff goes out. wrap your canvas contents into <ScrollControls>, define how many pages, and that should be enough, no <Scroll> needed. now you get scroll offset anywhere in your component tree via

const scroll = useScroll()

useFrame(() => {
  // scroll.offset gives you a value between 0 (start) and 1 (end)
1 Like