Perfectly aligning an interactive CSS3D terminal inside a curved WebGL CRT monitor

[manthrax]

I’m not sure about the number of hoops you jumped through to get the punchthru tho?

Can’t you just render the monitors screen mesh into the punchthru alpha to show through to your CSSRenderer behind the WebGL canvas?

the css3d-mixed sample also shows this.. notice at oblique angles, the boxy picture frame properly occludes the CSS content.

The key insight being that the CSSRenderer is placed behind the (webgl canvas with alpha=true)

Creating a texture that contains bootstrap doesn't seem to work

Yes! Glad to hear! And yes, overlaying the CSSRenderer on a WebGL renderer is a great use case. You can even do some fancy stuff by putting the CSS renderer behind the WebGL rendererer and doing some tricks to punch through the webGL revealing the CSS renderer behind it… which lets you make it appear as if the HTML is truly inside your 3d scenes… But it is pretty tricky to implement that, so I’d definitely start with CSS on top until you get comfortable with it.

Optimize Raycaster intersectObject

“positionMarkers” is getting called every frame, and each marker is doing a raycast.to check if it is occluded (behind the object). Since your model is pretty dense (lots of triangles) this is really slow. There are a few different ways to address this… Use an invisible low poly version of your model that you do the raycasting against. Use the CSSRenderer but integrated more deeply with threejs. Instead of having it as an overlay on top of the scene… put the cssrenderer Behind the threej…

edit: hahah found my earliest reference to it from 13 years ago!! :

HUD over render in webgl

and some potential pitfalls to watch out for:

CSS3Renderer elements disappearing/flickering at small scales..

Also.. as an extension to this.. you can also put another CSS layer on top of everything if you want something with nice transparency / blending but no occlusion… or using the punchthru for occlusion, but limited blending/transparency.