[SOLVED] Click on 3d element not work if there is a fullscreen transparent 2d element

Hi, guys.

I have some 3d element which can be clicked, and I am trying to simulate a blur event with a fullscreen transparent 2d element, so when I click on the fullscreen tranparent element, those 3d elements will lose the focus state.

However, if there is a fullscreen transparent 2d element, those 3d elements can not be clicked, as the click event only trigger on the 2d element ! This makes me confused. I have no idea how to solve this problem.

I made a demo to reproduce it: https://playcanvas.com/project/552587/overview
You can enable/disable the 2d screen entity, and then click on 3d elements, you will know what I mean.

If the 2d element is in front of the 3d element then that will be clicked it doesn’t matter if it’s transparent.

Thanks for your reply !
What do you mean by 2d element in front of 3d element ? Isn’t 2d element always in front of 3d element ?

In my demo project, the 2d element should be behind of 3d elements. But when clicking, 2d element’s click handler was executed always.

2d elements are always checked first for input so it’s like they are always in front of 3d elements. I don’t think you’ll be able to do what you want that way.

Do I need to use 3d element instead of 2d element ? But how can I make a fullscreen 3d element at farclip always ?

Maybe use a 3d element and have a script that always resizes it based on the screen resolution? I’m not entirely sure what you’re trying to do exactly maybe if you share more details about what exactly you’re trying to do it’d help.

I’ve update my demo above. It uses a 3d transparent to simulate blur event.
It works well when the camera is near.
However, when the camera move far away, the 3d transparent element can not be clicked.

When I clicked these areas, there is no output.

What I am trying to do is something like the annotation in sketchfab.

When you click the “empty space”, the annotation should lose focus.

One way to do that would be to listen on app.mouse.on(‘click’), When that is fired you close the annotations. To make sure the click event on the app is not fired when clicking on annotations you also need to do:

element.on(‘click’, function(evt) {evt.stopPropagation()})

Where element is the element component of the annotations.

1 Like

I’ve try what you say and I’ve updated the demo above.
It works in somehow. But there is another issue.
When you call evt.stopPropagation in element component, the onMouseUp event do not propagate to orbitCameraMouseInput. So, when click on element, and then move your mouse, you will find the camera is still moving… :cold_sweat:

You can also do stuff on mousedown instead of click?

That’s a good idea. But it comes another issue too.
If an annotation is focused, when you move the camera (on mouse down event), the annotation will suddenly lose focus. But in sketchfab, it lose focus when mouse up trigger.

I figure it out, by adding state for camera movement.