How can I render transparent HTML in React Three Drei without occluding 3D image planes?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

Hey all!

I’m using React Three Drei to render HTML text within a 3D scene composed of image planes at different z positions. The problem is that even though I’ve set the HTML element’s background to “none”, it still occludes the objects behind it—instead of letting them show through the transparent areas.

My goal is to properly layer the HTML text at a specific z position so that some image planes are displayed over the text while others appear behind it.

Here are a couple of examples:

Image plane appearing on top of the HTML element:
HTML element incorrectly rendered on top of the image plane:

Below is the relevant code snippet:

JSX

<Canvas camera={{ fov: 45, position: [0, 0, 5] }}>
        {frontMediaElements?.length > 0 &&
          frontMediaElements.map((media, index) => {
            return (
              <Media
                media={media}
                scroll={scroll}
                mouse={mouse}
                key={index}
                isMobile={isMobile}
                clickedIndex={clickedProject}
                handleClicked={handleMediaClicked}
                handleHovered={handleHovered}
              /> 
            );
          })}

        <Html
          position={[0, 0, -1]}
          fullscreen
          occlude="blending"
          wrapperClass={styles.html_wrapper}
          distanceFactor={0.8}
          transform
        >
          <AnimatePresence mode="wait">
            {!clickedProject && <AnimatingDisplayText />}
          </AnimatePresence>
        </Html>

        {backMediaElements?.length > 0 &&
          backMediaElements.map((media, index) => {
            return (
              <Media
                media={media}
                scroll={scroll}
                mouse={mouse}
                key={index}
                isMobile={isMobile}
                clickedIndex={clickedProject}
                handleClicked={handleMediaClicked}
                handleHovered={handleHovered}
              />
            );
          })}
      </Canvas>

Thanks in advance for any help or advice!

Comments 0

•

Answers 0

•

0 Answers

Discussion

No comments yet.