Query
I am currently developing a 3D scene using A-Frame () and I am in need of a solution to mirror an HTML div onto a plane within the A-Frame environment. For instance, imagine a scenario where there is a div at the bottom left corner of the screen functioning as a whiteboard, allowing users to draw on it. I want everything drawn on this whiteboard to be reflected on the A-Frame plane so that I can view my drawings within the scene.
Attempts Made
I have explored utilizing two components - the A-Frame HTML embed component (https://github.com/supereggbert/aframe-htmlembed-component) and the A-Frame shader component (https://github.com/mayognaise/aframe-html-shader). While both these components successfully display HTML content on a 2D plane within my scene, they fail to mirror the whiteboard content accurately and do not update dynamically. As a result, any drawings made on the whiteboard do not reflect on the 2D plane in VR, leaving the whiteboard blank.
Required Solution and Ideal Outcome
I require a method through which I can create an HTML div containing a whiteboard or similar interactive elements that can be displayed on a 2D plane within my A-Frame scene. The HTML content on the plane should update live, meaning if I draw a letter "a" on the whiteboard, it should appear on the 2D plane in the scene as well. An ideal solution would involve having a div where I can input my 2D HTML content (whiteboard) and see it mirrored in the virtual reality environment. Is there existing code or a specific component that could achieve this functionality?
Could it be possible that I overlooked something while working with the previously mentioned components that might help me accomplish this task? (Components used: https://github.com/supereggbert/aframe-htmlembed-component and https://github.com/mayognaise/aframe-html-shader) Alternatively, is there another A-Frame component available that would allow me to display interactive content on a 2D plane effectively?
Ultimately, I am looking for either the code for a component that enables mirroring a div onto a 3D plane in my scene, or a recommendation for a component facilitating displaying interactable content on a 2D plane.