Forward events from scroll area to canvas

[afk-mario]

I'm trying to build a similar demo to one of the examples

https://codesandbox.io/embed/r3f-moksha-f1ixt

My problem is as I start using a scroll area, all the pointer events are grabbed by the scroll area and the canvas doesn't receives them anymore, I tried using pointer-events: none but this disables the scroll event as well. I feel like I'm missing something obvious, but I don't know whats the best way to keep the scrolling behavior while having the onClick,onPointerOver,...etc working on my mesh

Demo with my setup

https://codesandbox.io/s/react-three-fiber-pointer-events-z429y

[drcmda]

this will all get easier in v6 which is using addeventlistener instead of react events. you could theoretically already try it.

in this example for instance it's adding events to document.body https://codesandbox.io/s/gltf-simple-example-v6-forked-o8mnv?file=/src/index.js

[afk-mario]

Can I use the events.connect using the old Canvas component ? I tried writing it like this but it doesn't seem to work.

import { events as ev } from "react-three-fiber";
...

  <Canvas
        events={ev}
        onCreated={(state) => {
          console.log("created", state.events.connect);
          // state.events.connect(document.body);
        }}
        colorManagement={false}
        orthographic
        camera={{ zoom: state.zoom, position: [0, 0, 500] }}
      >
        <ambientLight intensity={1} />
        <Layout items={items} onChangePages={setPages} />
      </Canvas>

[drcmda]

no, but in v5 theres some sort of a hack: https://codesandbox.io/s/r3f-contact-shadow-jvssp that lets you extract them and now you can spread them over something else.

[afk-mario]

This seems to offset all the events position to the scroll area coords, would that not be the case using the connect feature in V6 ? I'm just a little confused on how to use the connect function when I'm using ReactDOM to render my r3f app ideally I would like to use the connect function and keep the structure like

import {Canvas} from 'react-three-fiber@v6"

function R3FApp() {
   retrun(
       <Canvas onCreated={(state) => state.events.connect(document.body)} />
   )
}

function App() {
    return(
      <div>
        <R3FApp />
        <OtherReactComponents />
      </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

[afk-mario]

I Managed to make it work with the hacky solution, will wait for the V6 release and see if I can refactor to make it work with the new way of connecting events, thanks!