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.
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.
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.
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:
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…
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.
