0

I have a <Html><svg /></Html> element in my react-three-fiber project. This element is grouped with the camera to keep element in front of the camera. When mouse pointer is on this element scroll i not working for ScrollControl and not scrolling. Is there a way to keep scrolling on the background ?

T.I
  • 53
  • 5

2 Answers2

1

It is because your HTML elements didn't be in canvas. You can do the following. Add props 'fullpage' and 'zIndexRange={[-100, -2]}'

ex: <Html fullscreen zIndexRange={[-100, -2]}>

Then you can use your scrolling

Dev Star
  • 26
  • 4
  • Then, I can use scroll without issue. But I can't see HTML elements behind canvas. how should I solve this? – Dev Star Nov 11 '22 at 15:47
0

I saw the answer at discourse threejs, but i could not find it right now, here is the solution for people here.

function App() {
    const html = useCallback((element) => {
        if (element) element.parentElement.style.pointerEvents = 'none';
    }, []);
    return (
        <Html ref={html} as="div" >
            Hello World
        </Html>
      )
}
T.I
  • 53
  • 5
  • This solution can be achieved by adding a declarative style and you can avoid adding ref and useCallback. Just add the style prop to the Html component ```...``` – Cosmitar Oct 09 '22 at 06:25