Inserting content (text, videos, etc..) in Canvas, behind a model

Questions
, , ,
1

Hi everyone!
I have been learning three.js, three-fiber, and three-drei. I am working with React library, where I have a component that consists of two gltfjsx components: Scene and Person. I need to add a text inside the canvas I figured I could do that with , but I want the text to go behind the person and in front of the Scene. https://sougen.co/ is a great example of what I want to accomplish.

Can anyone help me with this issue?

PS. I also use useScroll, which moves the camera position, and the Person is animated with few actions.

2

You can add DOM elements (like text and videos) in react-three-fiber quite easily with drei - more specifically with the Html component (be sure to set occlude="blending" so that the HTML elements are depth-tested against the 3D world.)

Live example

3

Hi, thank you for your reply! I am using <Scroll html> from drei to add DOM elements, my problem was that I wanted to place a Skeleton model in front of a white background, and behind the scene behind the white background, the same as in the website that I’ve provided.