search

pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

Use scrollarea and mesh events #43

Closed haydenlinder closed 3 years ago

haydenlinder commented 3 years ago

Hello,

I'm currently using a scrollarea to position some of the content in my scene.

I would like to use react-three-fiber events on meshes like onPointerEnter also, but the scrollarea is blocking events to the canvas.

Any ideas?

giulioz commented 3 years ago

Have you tried with pointer-events: none;?

haydenlinder commented 3 years ago

Have you tried with pointer-events: none;?

On the scrollarea?

giulioz commented 3 years ago

I have no idea how you setup is like, if you provide a codesandbox we may help you better. However, if you put the css property pointer-events: none on an element, the mouse events will fall over to the underlying element.

haydenlinder commented 3 years ago

Placed on the scrollarea, it does allow pointer events to pass through, but then it disables scroll events.

I have also tried adding an onWheel to the wrapper of the Canvas, but that doesn't work on mobile phone scroll.

haydenlinder commented 3 years ago

Here's the code - https://github.com/haydenlinder/portfolio

haydenlinder commented 3 years ago

I was able to resolve by ditching the scrollarea and placing onWheel for desktop and onTouchStart and onTouchMove for mobile on the parent div of the Canvas.

The solution is implemented in src/App.js in the repo linked above.