How to implement HTML content affected by scene light?

I’m trying to implement a poster (HTML + CSS) in my site. I’m using React Three Fiber and the <HTML> component from pmndrs/drei works awesome.
The only missing feature is that my scene’s lights are not affecting the plane that renders the “poster”.
This is what I got so far.

<Html
      transform
      occlude
      position={[-3.04, 3.6, 0.1]}
      rotation-y={Math.PI / 2}
      distanceFactor={1.5}
    >
      <div className="poster">
        Hello World!
      </div>
    </Html>

it’s just a html/dom overlay on top of the canvas with 3d transforms. it is not actually part of your scene or threejs, nor can it be lit. try to light a div or a h1 on the dom, like … how?

you’d typically only use drei/html for things you can’t easily model with threejs, otherwise i suggest you use drei/rendertexture, which is part of your scene and reacts to lights.

2 Likes

That was a great explanation of the drei/html and actually RenderTexture is the kind of solution I was serching for.
Thanks @drcmda !!