Hello,
I came across the"Hud" function in the React three drei library. I experimented a bit with the given example and I wanted to put an html element like a div between two render. That means a first 3D layer followed by an Html layer and on top of it the last 3D layer. Therefore, the Html can eventually be hidden only by the objects of the last layer, but not by the first layer.
I didn’t find how to do it and if it was even possible to do it with “Hud”.
you don’t need HUD for this, heads up display is basically just a stacked render, multiple scenes render on top of one another with some portalling. HUD is still just happening in the same canvas, whereas html is either below or above the canvas.
i’m guessing this is what you want:
this will soon be default for drei/<Html occlude> with nothing that you have to do. in that example you still need to set the blendmode and create a plane to stamp a hole into the canvas but drei will handle that for you, there’s a PR waiting to be merged. when that PR is in html will behave as if it’s part of the canvas scene.
Interesting, thank you for the enlightenment.
I guess this new method for Html consumes a lot of resources and is not really scalable, right? Although this feature seems great I don’t think it is suitable for my case.
My goal is to display the names of a large number of players in a 3D world and prevent the names from appearing through the player’s weapon. I feel that making 2 canvas would be less expensive in my case.
it doesn’t, it’s less expensive than how occlude previously worked, it doesn’t even have to cast rays. it just stamps a hole into the canvas for the html to peek through. this then allows for accurate masking and sandwiching if that’s even a word.
ok! I will definitely try this, thanks!
It should be possible to instantiate planeGeometry to create several holes at once?
Does the PR use this/contain such an option?
you can make as many as you need. the pr will just do what the box above does manually so dont let it stop you, you can already proceed.