search

pmndrs / drei

🥉 useful helpers for react-three-fiber
https://drei.pmnd.rs/
MIT License
7.83k stars 642 forks source link

Html displays content incorrectly #1997

Closed deema089786 closed 2 weeks ago

deema089786 commented 2 weeks ago

What is your question:

Im building the scene with a phone model. I want to place Html component on the model screen to display some content. When I add Html component into the "screen" mesh, it positioned correctly, but content inside Html tag is looks like it has some depth and displayed lower. Here is code and screenshots:

<mesh
        name="screen01"
        castShadow
        receiveShadow
        geometry={nodes.screen01.geometry}
        material={materials.screen}
        position={[0.228, -0.41, -0.239]}
        rotation={[-1.567, -0.051, 0]}
      >
        <Html
          scale={0.1}
          position={[0, 0, 0.08]}
          style={{ background: 'red', width: 100, height: 300 }}
          transform
          occlude="blending"
        >
          <div
            style={{
              background: 'green',
              zIndex: 10,
            }}
          >
            test text
          </div>
          <p>test text</p>
        </Html>
      </mesh>

https://github.com/pmndrs/drei/assets/15146009/013a4847-358b-48f9-97e5-a8d3e01b6f6d

@react-three/drei: 9.107.0 Is it expected behaviour, and if yes, is it possible to remove this effect?

deema089786 commented 2 weeks ago

UPD: I found what causes that, but I do not know why and how :) Im using MUI 6 in my app design system/layout. And this effect happens when I add to the page Typography component with variants: h1,h3,h4,h5. When I use just the same code and set variant prop to h2 or h6, or anything else what is not h1,h3,h4,h5 - everthing is ok