search

pmndrs / drei

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

Material does not work as documented for HTML #1915

Open kevinschaich opened 2 months ago

kevinschaich commented 2 months ago

Problem description:

From the README:

You can also give HTML material properties using the material prop.

I have not been able to get this to work and it doesn't appear to be the case in any of the examples – as I understand the DOM gets rendered in a separate canvas either in front of or behind the rest of the scene, e.g.:

https://codesandbox.io/p/sandbox/occluded-html-forked-wp9mkp?file=%2Fsrc%2Findex.js

Is it possible to wrap this element with a decal or rendered texture?

Relevant code:

<Html
  occlude
  material={
    <meshPhysicalMaterial
      side={DoubleSide} // Required
      opacity={0.1} // Degree of influence of lighting on the HTML
      ... // Any other material properties
    />
  }
/>

Suggested solution:

Update the docs with solution if it's possible, or remove it

dale8nson commented 2 months ago

Did you set occlude to "blending"?