Bundle CSS3DRenderer Component

GoShow.me

This is an example CSS3DRenderer Component. It's rather robust and the example includes events, emits and spies, and should be easy to adapt to use for developers!

Download (04/18/2023)

How it Works

The component creates a Plane Geometry within the Scene Object. Three.CSS3DRenderer creates a DOM Element that is acts as an overlay over the Showcase IFRAME. The Plane that uses CSS to mirror the transformation of the Plane Geometry! The CSS3DObject's transformation is maintained via the component's 'onTick' function.

The CSS3DRenderer container div is VERY sensitive to inherited CSS. In this example, the IFRAME has a line-height of 1 and the border, margin and drop shadow that is shown on the IFRAME is applied to a wrapper div instead with a line-height of 1.

I've also made the mesh that the CSS3DRenderer maps to mirror the camera - so it always faces forward -- like Tags!

The Problem - Occlusion

As the Plane Geometry exists within our Scene, it will be hidden if you move to a place where there is MESH from the model that blocks it from sight. The CSS3DObject exists outside of the 3D Space, therefore, it is always visible. This creates a scenario that requires creativity to simulate occulusion.

One method, shown here, is to only show the CSS3DObject when the user hovers over the Plane Geometry. To enable this, I've set pointer-events: none to all CSS3DObject related elements so that they are not blocking the user's mouse cursor. When the user hovers over the Plane Geometry, a CSS Class is added to the CSS3DObject titled hover -- which enables { opacity: 1; transition: opacity 1000ms }. The default state of all .css3DElement(s) is { opacity: 0; transition: opacity 1000s; } -- thus we have an elegant fade in / fade out.

But there's a bug -- CLICK events are registering a HOVER (unhover) event... ideally mobile causes a problem -- especially as ideally, we'd want to allow mobile users the ability to turn the css3d object on and off too...

Potential Solutions

Only show the CSS3DObject when hovering over the Plane Geometry (Demo'd here!)
Only show the CSS3DObject when you are in the Room that the Plane Geometry exists in
Create a sensor around the CSS3DObject to toggle visibility when you enter the the source's radius.