Unable to make a CSS3D element interactive layer

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

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];

Any suggestions?

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

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

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

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?

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