Unable to make a CSS3D element interactive layer

Questions
1

Cannot seem to have the element interactive regardless what combination of pointer-events none/auto I try.

Screen Shot 2022-03-16 at 9.40.34 AM
Screen Shot 2022-03-16 at 9.40.34 AM1920×1011 161 KB

I am trying to make #emailer element interactive with the mouse. It’s the third child to the container that was passed into the renderer:

var container = document.getElementById( 'emailcanvas' );
this.renderer2d = new THREE.CSS3DRenderer();
container.appendChild( this.renderer2d.domElement );
var sceneDiv = container.childNodes[0];
sceneDiv.classList.add("nopointevents");

Any suggestions?

2

Maybe change the z-index of the domElement or the container?

3

Not sure if it will help solve your problem. But do you know this?

GradientsMaterialColor
MixedHtmlCssWebGl
How to set the options correctly in the select element? (CSS3DObject)

4

Yo @FuzzyWobble how are you setting the position and scale of the css3d element? I’ve had problems with interacting before when scale is below 1 and position it in negative space… Not sure if that applies in your case?

5

After many hours trying to debug this, somehow turning off overflow:hidden on the #emailer element fixed this issues. Now you can interact with mouse.

1 Like