Hello Babylon.js community,
I’m currently developing a 3D scene using Babylon.js with HTML content rendered on planes using HtmlMesh, but I’m encountering an issue when it comes to handling events within these special meshes that I hope someone can help me solve.
Current Implementation
I’ve created, for debugging purposes, a scene with HTML content rendered on a plane using HtmlMesh. The HTML includes a button that I want users to interact with. The cursor is always displaying as a picking hand; the click events aren’t being registered correctly.
The Problem
When I click on the HTML button within the HtmlMesh:
- The cursor is always rendering as a picking hand, indicating unintended hover detection.
- The click events aren’t being captured by the HTML elements and nothing prints to the console;
- I only get PickingInfo console logs when clicking outside the HtmlMesh areas
What I’ve Tried
I’ve created a test implementation specifically to isolate this issue.
Technical Details
I’m using:
- Babylon.js latest version
- TypeScript for implementation
- HTML content is being properly rendered on the planes
- Standard event listeners for the HTML elements (not sure how to make them work…)
Questions
- Is there a specific way to handle event propagation between Babylon.js 3D scene and HTML content?
- Do I need to configure something special for the HtmlMesh to allow click events to pass through?
- Is there a known limitation or workaround for interactive HTML content in Babylon.js scenes?
Any guidance or examples of correctly implementing interactive HTML content within a Babylon.js scene would be greatly appreciated!
Thank you for your help!