# How to implement HTML content affected by scene light?

**URL:** <https://discourse.threejs.org/t/how-to-implement-html-content-affected-by-scene-light/44635>\
**Category:** Questions\
**Tags:** lights, html\
**Created:** [November 13, 2022, 11:54am UTC](https://discourse.threejs.org/t/how-to-implement-html-content-affected-by-scene-light/44635 "2022-11-13T11:54:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DiegoFi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diegofi/32/27303_2.png) [@DiegoFi](https://discourse.threejs.org/u/DiegoFi)\
**Post date:** [November 13, 2022, 11:54am UTC](https://discourse.threejs.org/t/how-to-implement-html-content-affected-by-scene-light/44635/1 "2022-11-13T11:54:28Z")

</div>

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](https://github.com/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.

```javascript
<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>

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/4/f40e2d1f850e35baf1a6b8f47b1c561547ed2e58.jpeg)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 13, 2022, 1:47pm UTC](https://discourse.threejs.org/t/how-to-implement-html-content-affected-by-scene-light/44635/2 "2022-11-13T13:47:32Z")

</div>

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.

> **[Using render texture through decals - CodeSandbox](https://codesandbox.io/s/using-render-texture-through-decals-xncid1)**
>
> Using render texture through decals by drcmda using @react-three/drei, @react-three/fiber, @types/three, leva, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![DiegoFi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/diegofi/32/27303_2.png) [@DiegoFi](https://discourse.threejs.org/u/DiegoFi)\
**Post date:** [November 13, 2022, 9:27pm UTC](https://discourse.threejs.org/t/how-to-implement-html-content-affected-by-scene-light/44635/3 "2022-11-13T21:27:10Z")

</div>

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