Issue with HTML Interaction in Babylon.js 3D Scene (HtmlMesh)

Hello Babylon.js community, :waving_hand:

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

  1. Is there a specific way to handle event propagation between Babylon.js 3D scene and HTML content?
  2. Do I need to configure something special for the HtmlMesh to allow click events to pass through?
  3. 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! :slight_smile:

Thank you for your help!

Hey there! for us to help you conveniently I would recommend to repro in the PG directly.
I guess you saw the default demo right:
HtmlMesh Example PG | Babylon.js Playground

You can see that the checkboxes work for instance in that demo