HtmlMesh Extension

[ericwood73]

The HtmlMesh is a BabylonJS mesh that displays a webpage (or DOM element) in the scene, meaning that it can occlude other meshes and be occluded by other meshs.

Online Demo

BabylonJS Playground. Note the currently only works in fullscreen. There is an issue with getting the wrong canvas size initially.

The following uses cases are supported by the HtmlMesh

• Add instructional content/video to a 3D scene.
• Allow users in a 3D scene to fill out a form or respond to a poll.
• Display an in-app browser so a user can take some action, e.g. sign up for an account, purchase something, join an email list without leaving the experience.
• Create a rich UI that can leverage all of the capabilities of CSS and can be driven through a CMS

Note that the use of HtmlMesh requires that the experience be accessed through a browser so in it's current form, this will not work in native apps or in XR. If constructed outside of a browser context, the HtmlMesh instances will not have any geometry and will be disabled. In the future, it might make sense to have them appear with placeholder content of perhaps even an option to view the raw HTML in a popup UI.

[ericwood73]

@sebavan Think I addressed all of your comments.

[sebavan]

starting a deeper pass :-)

[ericwood73]

@sebavan I don't see an option to merge. Maybe I don't have merge rights?

[sebavan]

All done !!! thanks for the contribution !!!!