0
<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?

7
  • Any chance for sandbox? Commented Jan 27 at 10:29
  • Sorry, I didn't upload my code on Sandbox. Do you have any idea about it? without sandbox; otherwise, I will upload code on sandbox Commented Jan 27 at 13:30
  • Look HERE. Or just edit your question and paste full code to it. Commented Jan 27 at 13:53
  • please look Here Commented Jan 27 at 14:02
  • I don't see any difference between your clone and original site. What exactly you try achieve? Commented Jan 27 at 14:25

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.