Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – "Html" Component turning black after setting occlude to "blending"

pretty new to r3f but having a blast so far. I’ve run into a bit of an issue when rendering HTML into the scene with the drei helper. I’ll drop the code from my render function below:

<group ref={group}>
            <LogoMesh ref={logo} />
            <mesh
                position={[-0.7, 0.5, -0.15]}
                scale={1.4}
            >
                <boxGeometry args={[0.5,0.11,0]} />
                <meshBasicMaterial transparent map={subTexture} />
            </mesh>
            <mesh
                ref={boxRef}
                position-y={0.5}
                position-z={-0.8}
                scale={0.8}
                visible={visible}
            >
                <boxGeometry args={[4,2,0]}/>
                <meshBasicMaterial transparent map={bgTexture}/>
            </mesh>
            <mesh>
                <Html
                    occlude="blending"
                    receiveShadow // Make HTML receive shadows
                    transform
                    distanceFactor={1}
                >
                    <CyberButton>ENTER</CyberButton>
                </Html>
            </mesh>
        </group>

on my <Html/> component you can see I’ve set occlude="blending" as this seems like standard practice now to get realistic depth within the 3D scene, but whenever I set occlude to blending it renders as a black box like this:
occlude set to blending

instead of how it does when occlude is just set to true, but doesn’t properly occlude with the depth of the scene:
occlude set to true or raycaster

I feel like I’m probably missing something very simple, like a prop dealing with receiving light or something, but can’t find anything yet, has anyone come across this before?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After spending some more time with this, I've proposed a more accurate approach to searching for a solution on this post here


  2. 0

    I had the same issue, and after digging around, I found that the black box problem happens because the occlude="blending" setting is trying to blend the HTML element with the scene’s depth buffer, but it conflicts with certain materials or lighting settings.

    There is few things to try that helped me fix it:

    Check the zIndexRange Prop:

    <Html
  occlude="blending"
  receiveShadow
  transform
  distanceFactor={1}
  zIndexRange={[1, 0]} // Add this to manage depth blending
>
  <CyberButton>ENTER</CyberButton>
</Html>

    Verify Material Transparency

    <meshBasicMaterial
  map={subTexture}
  transparent
  opacity={1} // Make sure opacity is set to 1 (or a value that works)
/>

    Update Your Packages: Ensure you’re using the latest versions of @react-three/drei and @react-three/fiber

    Use occlude="true" (Alternative Test): If occlude="blending" is still problematic

    <meshBasicMaterial
  map={bgTexture}
  transparent
  depthWrite={false}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search