Combining WebGLRenderer & CSS3DRenderer

[enijar]

I recently came across a need to put HTML intoa 3D scene and have it be occluded. I came across the below example, and am wondering how to use multiple renderers in the Canvas component?

Example of multiple renderers in three: https://codepen.io/trusktr/pen/RjzKJx?editors=0010

[drcmda]

have you seen the Html component from the drei library?

[enijar]

Yes, but that just overlays DOM elements on top of the canvas. The CSS3DRenderer can be used in conjunction with WebGLRenderer to get occlusion of DOM elements. This cannot be achieved with the Html component from drei.

For example, you can only achieve this effect by using the CSS3DRenderer with the WebGLRenderer.

[drcmda]

well you can use the regular css3drenderer, the problem ofc is that it's a dirty imperative setup where you create divs by hand. in theory theres even a real react renderer for it import { ... } from "react-three-fiber/css3d" but i havent used or tried it.

i guess the easiest route forward is that you look at the Html source in drei and extend it, then send a PR. the lib grows as people use it and implement their requirements.

[enijar]

Thanks for the advice. Are there any examples of using the css3d renderer with an existing wegbl ?

[drcmda]

i have never tried the css renderers out, but here's the svg renderer in action https://codesandbox.io/s/svg-renderer-7ecll

i still don't think this is something a "renderer" should handle. it's probably best to just extend the html component in drei. the source for css3d isn't that much if i remember correctly.

[anuragsr]

The link seems to have just a Torus knot rotating

[enijar]

@anuragsr if you inspect the HTML source, it renders to an svg element instead of a canvas element

[RichardLindhout]

This is quite nice https://threejs.org/examples/#css3d_orthographic it renders two canvas one with div and one with webGL

[RichardLindhout]

The Html component is nice but I want it to be inside the 3d not on top of it fixed but static inside a 3d object

[drcmda]

threes css3d renders on top. your example are just divs with a background color. there are no 3d objects present there.

html and webgl don't mix. now our Html component even can "hide" things html behind 3d geometry, but these are all tricks ofc. generally there really is no point in using css3drenderer. you could of course, but Html does everything css3d could, and more (css3d can't hide for instance). Also easier to handle.

[ANoobyBird]

Hi! As Enijar does, I too desire some form of in-canvas HTML to be present, for aesthetic purposes of a tiny project.

I'm quite new in both three.js and react.js, and in javascript really, so anything more techy might currently be beyond me. Anyway, for now I'm writing just to say that I think this feature, for which similar questions have been made by lots of people who use three.js, is--not necessarily should, but--could be added as part of the Drei HTML--which would then be the R3F equivalent of world space UIs.

[drcmda]

As for blur this is not up to drei or R3f. All the html component does is render and transform html. Perhaps it needs to be in a certain place but you can also do that with the portal prop.

[drcmda]

made a quick PR to finetune the occlusion bahaviour seems to run well pmndrs/drei#422

[ANoobyBird]

Thank you, drcmda! This has been the most helpful. :)

Now it works in my project as well once I set everything up and updated drei.

By the way, I wasn't able to find the occlude and onOcclude props on the pmndrs docs yet. Should it be considered appropriate, the pmndrs docs may also be updated accordingly to help newbies like me find it quicklier.

Thank you for this!

[ANoobyBird]

Although there is still something to be better handled, I think--since real world objects don't disappear completely when they are only partially occluded, yet HTML would wholly disappear whenever it is partially occluded. Perhaps an alternative approach is to target the meshes for a more realistic occlusion, make the material of meshes render on top of HTMLs whenever occlusion is detected?

[drcmda]

this is not possible. html can not be within your scene. it is always on top:

<canvas></canvas>
<div>hello</div>

a div cannot be behind a mesh, and it can't be partially occluded. this is all smoke and mirrors, you create conditions that more or less make it work by changing visibility. this is what the html component does for you.