Hey all!
I am using React Three Drei to render HTML text within a scene of planes with differing z positions.
The issue I am having is that even tho my HTML has a background set to “none”, the objects “behind” the HTML disappear behind the HTML plane rather than showing through the transparent parts.
My goal: Add HTML text at a specific Z position in 3d so that some image planes go over the text and some go behind the text.
Here are a few pictures of what is currently happening.
Image plane going over top of the HTML element:
HTML element incorrectly on top of image plane:
Here is currently the code I am rocking with:
<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>
Thank you ahead of time for anyone who takes the time for this! 