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 ?
Add a comment
|
2 Answers
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
1 Comment
Dev Star
Then, I can use scroll without issue. But I can't see HTML elements behind canvas. how should I solve this?
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>
)
}
1 Comment
Cosmitar
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
<Html style={{ pointerEvents: 'none' }} >...</Html>