Html mirror react elemets in r3f

Questions
, , ,
1

I placed div with react element in Html from drei and the element doesn’t respond on scroll and flipped.
In documentation no parameters flipX or Y. I know people use iframe for to show website and be able to scroll, but the iframe is flipped too. I found problem in transform and distanceFactor={0.102}

Code:

<mesh
    geometry={nodes.main_monitor_screen.geometry}
    >
      <Html
        position={[-0.124, 0.554, 0.875]}
        transform
        rotation={[0,0,.0001]}
        distanceFactor={0.102}
        occlude="blending"
        >
        <div className="w-[1940px] h-[1170px]">
          <Landing/> 
        </div>
      </Html>
  </mesh>

Untitled
Untitled1668×908 96.5 KB

2

You could try asking here: Poimandres

1 Like
3

you flip it like you would any other element, for instance rotation={[0, Math.PI, 0]}

i do not know what you mean with doesn’t respond to scroll. do you have a scroll control inside the canvas or do you scroll the whole canvas from within the dom?

4

Appreciated for your help, scroll works on whole scene and I have overlay ui and in monitor component.Scroll should work only inside monitor mesh. I found easier to use iframe, the only problem with it is effect loading speed, and it’s not the best use of it, I guess. But I only need a landing page with one form.