I am currently working on a game utilizing the three.js library and I have a specific requirement. I would like to incorporate a small "panel" on the screen that remains stationary regardless of the user's navigation through the 3D environment. Essentially, I want this panel to be unaffected by camera movements.
For reference, you can view an example at . This example demonstrates a non-moving panel positioned in the bottom left corner of the screen.
My goal is to have clickable objects within this panel, such as meshes, which trigger specific functions when clicked. In the provided example, a div element was used for this purpose.
How can I achieve this functionality? I've explored the Sprite object, but it doesn't seem to support click events. Thus far, my approach involved creating clickable meshes and manually adjusting their positions relative to camera movement, but this became cumbersome due to varying camera behaviors.
EDIT Another important detail I omitted is that I require this panel to be transparent and not obstruct any elements behind it. Only the specified meshes within should be visible without obscuring background content.