<Html
portal={{ current: gl.domElement.parentNode }}
scale={100}
transformGroup >
<div
className="about-wall about-wall-text"
style={{
width: '40rem',
position: 'fixed',
transform: 'translate(-50%, -50%)',
willChange: 'transform, opacity',
pointerEvents: 'none',
}}
>
<h2>
About Us
</h2>
</div>
</Html>
This is my html that I used inside mesh and I am using ScrollControls for scrolling:
<ScrollControls hideScrollbar={true}
pages={35} distance={1} damping={0.5}
>
<Newmodel isMobile={isMobile} />
</ScrollControls>
But when I am scrolling, the Html content is not fixed at it's position. When I try to display images with Decal instead of Html, they are displayed fine, so how can I make my Html fixed?