Enhancement request: Vue Reactivity support in Html component

[XnetLoL]

Description

Hi there, I wanted to bring up an issue similar to #407 but with additional details to help clarify the need for an enhancement.

The Html component is an excellent tool for integrating HTML elements within a 3D scene, providing a seamless way to overlay UI components on top of 3D objects. However, it currently does not leverage Vue's Reactivity API, which creates some limitations, especially when dealing with dynamic content.

Problem: Since the Html component doesn't interact with Vue's reactivity system, I'm forced to use iframes for tasks that would otherwise be straightforward. For example, I'm trying to use D3.js (or similar libraries) to generate charts and render them inside a 3D scene. However, because the container's ref is always null, the SVG generated by D3.js never gets mounted to it. This leaves me with no option but to create a separate view and load it via an iframe.

Why This is a Problem: Using iframes in this context is far from ideal for several reasons:

• Performance Overhead: Iframes introduce additional loading time and memory usage, which could be avoided if the Html component supported Vue's reactivity.
• State Management: It complicates state management, as communication between the parent and the iframe is non-trivial.

Example Use Case: Here is what I was attempting to achieve with a TheChart.vue component, intended to be used inside a TresMesh: TheChart.vue component code: CodeFile

And here's a minimal reproduction of the desired feature: StackBlitz Example

Suggested solution

It would be incredibly useful if the Html component could integrate with Vue's Reactivity API. This would enable developers to use dynamic, reactive content without resorting to workarounds like iframes.

Alternative

No response

Additional context

No response

Validations

• [X] I agree to follow this project's Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• tresjs-basic-7ccusf (Open reproduction)

[XnetLoL]

I discovered that directly using a Vue component inside the Html property (with the Html component being inside the TresCanvas instead of the Vue component itself) works as expected. This means we can use Vue components inside the Html component, but those components should not contain the Html component within them.

Here’s an example: StackBlitz Example

If this is the expected behavior we can close this issue, it would be helpful to have this in the docs tho :D